0

I'm trying to create a class that I can use to hide certain divs on the mobile version of the site. The css that I am using is 

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

viewport is set to 

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

Yet when i view the site on a device with a resolution less than 720px the div is still visible. I cant seem to figure out why its not working. What am I missing? I have tried all of the suggestions listed in Hide div on mobile devices, using CSS but cant seem to figure out what ive done wrong.

Here is a pen to illustrate the issue....resize it to under 720px and the desktop-only div doesnt hide http://codepen.io/anon/pen/vEjvbM

Community
  • 1
  • 1
Cameron L
  • 88
  • 5

1 Answers1

0

I can see it working. You probably forgot to add the CSS in CodePen.

See this updated version: http://codepen.io/anon/pen/azGPxG

Use the same CSS that you mentioned:

@media screen and (max-width: 720px) {.desktop-only { display: none !important; }}
Rahul Desai
  • 13,802
  • 14
  • 75
  • 128