Matt Matt - 1 month ago 7
CSS Question

Bootstrap Media Queries

Using the following code in my CSS stylesheet to target my jumbotron:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

.jumbotron {
padding-top: 500px !important;
padding-bottom: 350px !important;
margin-bottom: 0;
background: url(../images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

}


The intent is just to increase the top and bottom padding of my jumbotron in mobile displays. But this code does not affect my jumbotron at all. What am I doing wrong?

I have tried using only
min-width
and only
max-width
, in addition to using both with the
and
as in the code above. All three have resulted in no changes.

Answer

@screen-sm-min and @screen-sm-max are less vars. So you have to specify real values if you want to use them in CSS:

@media (min-width: 768px) and (max-width: 991px) {

But if you want to apply a css style only on mobile devices, the correct media query should be:

@media (max-width: 767px) {
Comments