title: changing content depending on different media queries
body: <p>This is the second attempt at this question as I have worked on this since I last asked so hopefully I'll make more sense this time.</p>
  
  <p>I'm creating a responsive layout for my coming soon page. The main body header changes depending on the size of the browser and the device.</p>
  
  <pre><code> &lt;h1&gt;&lt;span class="main__header--changer"&gt;COMING SOON&lt;/span&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>... and the CSS</p>
  
  <pre><code> @media (max-width: 75em) {
        h1:before {
             content: "HOLD ONTO YOUR HATS";
        }
        .main__header--changer {
             display: none;
        }
   }
  
   @media (max-width: 64em) {
        h1:before {
             content: "NOT LONG TO GO";
        }
        .main__header--charger {
             display: none;
        }
   }
  </code></pre>
  
  <p>... and so on and son on, the different variations of coming soon contains less letters as the size goes down, right down to 'nigh'.</p>
  
  <p>The only thing my way of doing this means that screen readers wont read the heading because of the display:none. Is there a different way to hide the heading but not from screen readers but that the content is shown from the css?</p>
  
  <p>Thanks</p>