1

I cannot seem to get any media queries to work. I have no idea why. I tried a million different things. It just wont work.

CSS:

@media screen and (max-device-width: 320px) {
    #sidebar {
        display: none !important;
    }
}

HTML:

<body>
<div id="sidebar">
  <ul>
    <li><a href="about.html">About</a></li>
    <li><a class="active" href="projects.html">Projects</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <div id="side-footer">
    <p><a href="mailto:business@darmisdigitaldesigns.net?subject=Website">Contact Webmaster</a><br />&copy; DDD 2012-2014</p>
  </div>
</div>
<div id="content">
  <div id="content-wrap">
    <h1>Projects</h1>
    <hr>
  </div>
</div>

Meta Tag : 

<meta name="viewport" content="width=device-width,initial-scale=1">
Roy M J
  • 6,926
  • 7
  • 51
  • 78
RonnieEXP
  • 169
  • 1
  • 1
  • 8
  • 3
    Have you added the `meta-viewport` in head? – Roy M J Nov 25 '13 at 15:12
  • 3
    Have you tried looking at the output on a 'device' (ie. 'phone, tablet) ? If you're looking at it on a desktop/laptop 'max-device'width' won't work and for testing purposes replace it with 'max-width'... – Pat Dobson Nov 25 '13 at 15:15
  • Refer to this question, http://stackoverflow.com/questions/19945658/my-iphone-thinks-its-980px-wide/19945844#19945844. – Josh Powell Nov 25 '13 at 15:19
  • My viewport tag is as follows `` – RonnieEXP Nov 25 '13 at 15:19
  • Can you try with just `` and also hope you are using a device which has smaller resolution for testing this scenario? – Roy M J Nov 25 '13 at 15:25
  • Honestly have no idea what I did, but I got it working. Thanks for the help guys. I would answer the question but my lack of rep doesn't allow it. – RonnieEXP Nov 25 '13 at 15:25
  • 1
    Final note: I used Adobe Device Central for testing with `max-device-width` and it worked. Also got `max-width` working in the browser. – RonnieEXP Nov 25 '13 at 15:26
  • Okay great.. Answer it when you have enough rep.. :) – Roy M J Nov 25 '13 at 15:27

1 Answers1

0

Check this fiddle

max-width is the width of the target display area, e.g. the browser

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

the correct way to use this css rule in fiddle is

@media screen and  (max-width: 320px) {
    #sidebar {
        display: none !important;
    }
}
ppollono
  • 3,421
  • 1
  • 19
  • 29