CODEWITHSUNDEEP
csstwitter-bootstrap
Matt
Matt

Reputation: 395

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.

Upvotes: 1

Views: 113

Answers (1)

Seb33300
Seb33300

Reputation: 7566

@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) {

Upvotes: 1

Related Questions