Why Are My Media Query's Instructions not Honored 100% On Some Devices

Question

In an effort to become mobile friendly I have implemented a media query kindly suggested by @cch. It hides the "aside" (sidebar) effectively, but fails to expand the "article" (main) into the resulting empty space in all browsers and on all devices. What am I doing wrong?

CSS followed by HTML below:

@media screen and (max-width: 750px)  {
  aside { display: none; }
  article { width: 100%; }
}
#main {
	width: 58%;
	float: left;
	margin-left: 2%;
}
#sidebar {
	float: left;
	width: 34%;
	margin-left: 4%;
}

<article id="main">
    <h2>The Advanced ON-SITE Advantage</h2>
    <p>As a service for maintaining shades, shutters, blinds, and drapes through occasional cleaning and repair, you can be confident we're supremely qualified. </p>
    <p>Correct identification of the many fabrics and coatings used in draperies, shades and top treatments is critical to safe, yet effective, cleaning of these items. Advanced On-Site is certified to do just that. It's why we're able to <a href="guarantee.html">guarantee</a> against shrinkage or damage.</p>
    <p><span class="centered">
      <figure>
        <img src="images/cleaninstall.jpg" width="400" height="225">
        <figcaption>Flawless cleaning and installations</figcaption>
      </figure>
      </span>  Likewise, window coverings installed by  Advanced On-Site do not suffer from poor funtionality due to improper installation. Only the best materials and fasteners are used, and great care is taken to ensure that every component enjoys the complete freedom of movement imperative to long life.</p>
  </article>
  <aside id="sidebar">
    <h2>Tip</h2>
    <p>Window coverings are often damaged through incorrect operation. The following suggestion will increase life expectancy.</p>
    <blockquote>
      <p><strong>Never let go of a cord until you know it has come to rest:</strong></p>
      <p>Shades and blinds with  modern retractable mechanisms typically use control cord assemblies. These incorporate hard connectors that can damage delicate components on impact. With  traditional cord-lock mechanisms, the cord should not be released until its &quot;catch&quot; is engaged. This prevents the bottom-heavy shade from crashing onto the sill.</p>
    </blockquote>
    <p>Even when the foregoing is observed, sun damage and simple wear may render the occassional repair necessary. If that happens call us.</p>
  </aside>

Thanks in advance,

Dave

Answer 1

Selector #main has higher specificity than article, so the width is still 58% even when the media query matches.

Chose a selector with higher specificity for the formatting of article inside the media query; or, if you want one with the same, place the media query below the general formatting.

Answer 2

Also, aside from what CBroe said, make sure you add the following meta tag to ensure consistent results across a range of devices:

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

You can find more about this here:

https://css-tricks.com/snippets/html/responsive-meta-tag/