Hide html element when specific resolution

Question

I am using twitter bootstrap 3.0 . When resolution of the screen gets changed to smaller the menu changed to mobile view. I have a div contained slider with images, so I want to hide that div when my menu changed to mobile view (when screen resolution small).

I tried to apply css classes on my div visible-desktop visible-tablet but it is not working.

Is there other way I can do?

Answer 1

If you're using Bootstrap v3, they changed the responsive utility class names. See http://getbootstrap.com/css/#responsive-utilities

You probably want .hidden-xs

This was also documented in Migrating from 2.x to 3.0

Answer 2

Consider using media queries. Something like

@media screen and (max-width:480px) {
    .mydiv {display:none}
}

Answer 3

You just have to apply the Bootstrap classes as seen here . You can test them there also, if you resize your browser screen you can check wich ones are active.

<div class="hidden-xs">This is the div that will hide on mobile</div>

Should only be seen in any screen bellow 768px (mobiles)

Answer 4

You can put in the class of that div .hidden-xs .. It's more simple. You are only telling that this div is visible on desktop and tablets, and not telling that it isn't visible in small devices.