Show content on different screen sizes, absolute measurements

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 = '18px';}">Set 18px Font</button>
    <button onclick="{document.body.style.fontSize = '26px';}">Set 26px 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: 18px;
}

@media (max-width: 500px) {
  .not_used_on_narrow_displays {
    display: none;
  }
}