title: Using @media all and (max-width:1017px) to address flex-wrap: wrap
body: <p>Some pages on my website have an <code>&lt;aside&gt;</code> and an <code>&lt;article&gt;</code> under a <code>&lt;main&gt;</code> which serves as a flex container. When the window narrows I want the <code>&lt;aside&gt;</code> to disappear. Most of my Google research says I should use JavaScript to accomplish this. However, I recently found that CSS has a native <em>"if-like"</em> function which I shared in a code section below.</p>
  
  <p>I've tried out the CSS <em>"if-like"</em> function and it looks to be working fine in Firefox and Chrome. It also lets me add padding to the footer so the text isn't right against the window sides. However, the <code>max-width: 1017px;</code> makes me wonder if it will work in other browsers or mobile browsers considering the content itself doesn't exceed <code>1000px</code>.</p>
  
  <p>Did I find a good solution to my problem or should I try a JavaScript solution instead?</p>
  
  <pre class="lang-css prettyprint-override"><code>main {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1000px;
  }
  article {
    flex-basis: calc( 1000px - 12em );
    flex-grow: 1;
    min-width: 375px;
  }
  aside {
    min-width: 12em;
  }
  footer {}
  @media all and (max-width: 1017px) { /* not sure why it doesn't fire for 1000px */
    aside {
      display: none;
    }
    footer {
      padding-right: 10px;
      padding-left: 10px;
    }
  }
  </code></pre>