Hide div on mobile devices, using CSS

Question

I want to hide a div containing the facebook likebox widget from mobile devices. I tried this but it doesn't work.

div code:

<div id="facebook" class="fb-like-box mobile-hide" data-href="https://www.facebook.com/mypage" data-width="220" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div>

css code:

@media screen and (min-width: 0px) and (max-width: 720px) {
  #facebook { display: none; }
  .mobile-hide{ display: none; }
}

What am i doing wrong? It does not work using the id or the class reference.

Answer 1

Try these it works for me.

Example 1:

@media only screen and (max-width: 479px) {
   .mobile-hide{ display: block !important; }
}

Example 2:

@media only screen and (max-width: 479px) {
   .mobile-hide{ display: none !important; }
}

description link

Answer 2

I personally think your "display" parameter is the wrong one, try using visibility instead. I tested it and it worked for me.

This one should work for you:

@media only screen and (min-device-width: 0px) and (max-device-width: 720px) {div#facebook {visibility:hidden;}}

I think you can even forget about the use of a class.

Answer 3

Just delete the "and (min-device-width: 0px)"

Answer 4

Try this.

 .mobile-hide{ visibility: hidden; }

edit: sorry, meant to put visibility.

Answer 5

If you are working on a fluid grid layout, DW already created the 3 media queries for you. To hide a DIV on phone only apply:

#div{ display:none; } The trick is,that you have to add this line to tablet

#div{ display:block; //or inline or anything, how you wish to display it }

It works for me, hope it's useful.

Answer 6

Why not add the evil !important to your display: none?