title: Why is my DIV not showing on mobile?
body: <p>I'm trying to show/hide HTML code based in screen resolution.
  I can see the DIV <strong>news_box_desktop</strong> on my desktop computer, but can't see any DIV at all on my mobile (whereas <strong>news_box_mobile</strong> should be visible)
  What is the issue?
  Thanks,</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header class="clearfix"&gt;
    &lt;a href="index.html" title=""&gt;&lt;img class="logo" src="images/blue.png" alt=""&gt;&lt;/a&gt;
    &lt;div class="menu-container"&gt;
      &lt;nav&gt;
        &lt;ul id="menu"&gt;
          &lt;li&gt; &lt;a href="index.html"&gt;Accueil&lt;/a&gt; &lt;/li&gt;
          &lt;li class="selected"&gt; &lt;a href="biographie.html"&gt;Biographie&lt;/a&gt; &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
    &lt;div id="news_box" class="news_box_desktop" style="position: absolute; bottom:20px; right: 20px; width: 380px; float: right; text-align: left;"&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;div id="news_box" class="news_box_mobile" style="position: relative; width: 90%; margin:auto; left: 0; right: 0; text-align: left;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media only screen and (max-width: 40em) {
  .news_box_desktop {
      display: none;
  }
  .news_box_mobile {
      display: block;
  }
      }
  </code></pre>