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.

Solution 1

For some reason (unknown to me) this worked:

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

Solution 2

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

Solution 3

Make sure your page defines a viewport meta tag.

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

For more information on this tag see: Understanding The Viewport Meta Tag.

Solution 4

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.

View more solutions

Comments

[Christos Baziotis]

This is my viewport meta tag. <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">