CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3media-queries
red888
red888

Reputation: 31520

media queries with bootstrap not working

I wanted to have large pictures be hidden for mobile devices. Looking at this site I put the following styles in my css:

//medium+ screen sizes
@media (min-width:992px) {
    .desktop {
            display:block !important;
    }
}

//small screen sizes
@media (max-width:991px) {
    .mobile {
            display:block !important;
    }

    .desktop {
            display:none !important;
    }
}

Then I apply the class in my html like this:

<img class="desktop" src="img/test/test.jpg" 
    alt="jhkjhjk" height="600" width="900">

But when I shrink my browser window the image remains there. Have I missed something?

Upvotes: 2

Views: 1668

Answers (1)

Joe Swindell
Joe Swindell

Reputation: 671

Since you are using Boostrap, you can do it even easier.

Append a class of 

visible-md

to your image.

md is for >992 px.

Check out the easy classes you can use http://getbootstrap.com/css/#responsive-utilities

EDIT: probably wanna do visible-md visible-lg if you're gonna do visibles. The chart explains all the combinations.

Upvotes: 5

Related Questions