Search code examples
csswidthscreenmediadisplay

Hide Div on Desktop, Show On Mobile

I have a paragraph inside a DIV that I want completely hidden when the width is > 500 and to display when the width is < 500. I'm not sure what's wrong here.

<head>
<style type="text/css">
#mobileshow    { display:none; }

@media screen and (max-width: 500px) {
#mobileshow   { display:block; }
}
</style>
</head>

<div id="mobileshow"><p>Click the images below to download.</p></div>
Solution

  • Apparently my formatting was wrong. Too many spaces or line breaks in the wrong place. Not sure which. Here is the updated code:

    <style type="text/css">
#mobileshow { 
display:none; 
}
@media screen and (max-width: 500px) {
#mobileshow { 
display:block; }
}
</style>

<div id="mobileshow"><p>Click the images below to download.</p></div>