Show content on different screen sizes

by MattMiller

HTML

<html lang="en-US">
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body>
    <button onclick="{document.body.style.fontSize = 'x-large';}">Set x-large Font</button>
    <button onclick="{document.body.style.fontSize = '';}">Reset Font</button> 
    <p>This always shows.</p>
    <p class="not_used_on_narrow_displays">This shows only on wide screens.</p>
  </body>
</html>

CSS

body {
  font-size: large;
}

@media (max-width: 33em) {
  .not_used_on_narrow_displays {
    display: none;
  }
}