2

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?

1 Answer 1

5

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.

2
  • Awesome, that's even better I'll just do that. Still though why weren't my media queries working?
    – red888
    Commented Nov 7, 2014 at 21:57
  • I'm not the best with media queries, but you might need to specify the media tpye "@media screen" Commented Nov 7, 2014 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.