Twitter Bootstrap - How to change css class based on @media defined widths

Question

This is my first question here, but I would just like to say this website has helped me on countless times over my years. I guess I've got to the stage where I have my own questions to ask!

Sorry if the question isn't clear, I'll try to elaborate: I have assigned a transition to some of my elements, so that when they are hovered over they rise upwards (ie; .example:hover {margin-top: -25px} ).

You can see where I have applied this on this page.

Hover over the elements underneath the "Coming Soon" alert box (ie; "Pixel Perfect Designs", "Beautifully Clean Code" & "Over 5 years Experience").

All works fine, however you'll notice that when the browser window is re-sized small enough so the elements are stacked vertically (I believe this is @media (max-width: 767px) ), the hover effect doesn't seem quite at clean. I would like to remove the effect altogether when the website is displayed this way (for mobile devices).

So the question is how do I change a class's properties based on the width of the browser? I would like to remove the margin-top when hovered when displayed for a mobile device (ie; < 767px) but keep it there when viewed normally.

Thanks

Answer 1

The sytling is coming from docs.css where you have:

.shift:hover {
margin-top: 40px !important;
}

As @dequis noted, @media queries are the way to go. Since the hover effect doesn't work so well when the 3 columns are stacked on a mobile screen, one possiblity is you could remove the vertical transition and replace it with a horizontal transition, with something like the following added to docs.css:

@media (max-width: 767px) {
.shift:hover {
margin-top: 0 !important; /* it's possible this might need some fine-tuning */
margin-right: -20px;
}

}

It's possible this might need some tweaking once it's in place, thought that will be easy if it's needed.

Good luck!

Answer 2

Only a small thing you have to add.

@media (max-width: 767px) {
  .shift:hover {
    margin-top: 0;
  }
}

One more thing if working on small devices what is the benefit to use transition properties because we don't want any change/effect on this viewport. So add this also for rendering fast on mobile browsers.

@media (max-width: 767px) {
  .shift {
    transition:none;
    -webkit-transition:none;
    -moz-transition:none;
  }
}

Answer 3

Just wrap the corresponding CSS rule with @media like this:

@media (min-width: 768px) {
    .example:hover {
        margin-top: -25px;
    }
}

Note that I'm using min-width - this excludes the rule from "phone" view.