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.

what is the width resolution on the device, it might be larger then 720 — Patrick Evans, Jun 04 '13 at 16:08
it works on my end. do you have a rule for .fb-like-box lower down that defines a new display? http://jsfiddle.net/H4vzE/ — skzryzg, Jun 04 '13 at 16:28
can you make a jsfiddle with your entire css, html, and any js? — skzryzg, Jun 04 '13 at 16:32
I just put your code in a jsfiddle and it works fine [link](http://jsfiddle.net/4rNGV/) . Let's troubleshoot some to see if this issue is with the media query not being called properly or if there is a problem with the id/classes. Have you tried declaring other CSS rules under media to see if it is working as intended? Set one of your divs background color to change when width reaches 720px. If the divs background changes then we know it is something with the id/class being called on. If the background does not change then we know the media query isn't being executed. — Matt, Jun 04 '13 at 16:35

Christos Baziotis · Accepted Answer · 2017-02-14T21:15:04.450

7

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>

edited Feb 14 '17 at 21:15

answered Jun 05 '13 at 00:05

Christos Baziotis

5,227
15
54
78

score 6 · Answer 2 · answered Jun 04 '13 at 16:09

6

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.

answered Jun 04 '13 at 16:09

Dan

17,063
3
33
37

This is my viewport meta tag. – Christos Baziotis Jun 04 '13 at 16:17

score 6 · Answer 3 · answered Nov 05 '15 at 15:30

6

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

answered Nov 05 '15 at 15:30

Muddasir Abbas

1,344
16
32

score 1 · Answer 4 · edited Jan 11 '14 at 21:03

1

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.

edited Jan 11 '14 at 21:03

yprez

13,376
10
52
70

answered Jan 11 '14 at 20:29

Julian B

11
2

score 0 · Answer 5 · answered Jun 04 '13 at 16:12

0

Try this.

 .mobile-hide{ visibility: hidden; }

edit: sorry, meant to put visibility.

answered Jun 04 '13 at 16:12

Matt

2,240
1
13
25

score 0 · Answer 6 · answered Jun 04 '13 at 17:29

0

Okay I had this problem a while back, and for some odd reason it only worked when i put my media query rules at the end of the css. Don't know why that is, maybe a bug of some sort, but give that a try and let us know if that works.

answered Jun 04 '13 at 17:29

Charles

407
3
6

score 0 · Answer 7 · answered Jun 04 '13 at 18:39

0

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

answered Jun 04 '13 at 18:39

Daniel

513
4
11

score 0 · Answer 8 · edited Jan 01 '14 at 12:46

0

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.

edited Jan 01 '14 at 12:46

RAS

7,807
15
61
81

answered Jan 01 '14 at 12:25

endi97

1
2

score 0 · Answer 9 · answered Jun 24 '14 at 22:39

0

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

answered Jun 24 '14 at 22:39

Laurent

9
1

score 0 · Answer 10 · answered Mar 13 '19 at 22:51

<style type="text/css">
  .mobileShow {
    display: none;
  }
  /* Smartphone Portrait and Landscape */
  
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .mobileShow {
      display: inline;
    }
  }
</style>
<!--.mobileHide{ display: none;}-->

<style type="text/css">
  .mobileHide {
    display: inline;
  }
  /* Smartphone Portrait and Landscape */
  
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .mobileHide {
      display: none;
    }
  }
</style>

<body>
  <div class="mobileHide">
    <p>TEXT OR IMAGE NOT FOR MOBILE HERE
      <p>
  </div>
  <p> yep its working</p>
  <div class="mobileHide">
    <p>THIS SHOULD NOT SHOW On Mobile (view in mobile mode)
      <p>
  </div>
</body>

Source: https://blog.hubspot.com/marketing/site-content-only-mobile-viewers-can-see-ht

This code should work, You could also do a mobile redirect, or you can use JavaScript to detect the device (android or iPhone) though I would recommend I combination of the two and take note of screen sizes.

Hide div on mobile devices, using CSS

10 Answers10

Linked