<h1>@media rule /<br> responsive break-points</h1>

<p>Psst! (resize the viewport)</p>


<h2>Screen size: </h2>

<!-- 

  :after 

  will add some special content "after" the content of an element.

-->


<p>(and a use of the :after 'pseudo element')</p>

body {
  padding: 20px;
  background-color: #ff9197;
  transition: 1s;
}

h1, h2 {
  font-family: sans-serif;
}

h2:after {
  content: 'small';
  font-style: italic;
  text-transform: uppercase;
}



/* check the window... when it is as least 500px... do this */
@media (min-width: 500px) {
  body {
    background-color: #ffca92;
  }

  h2:after {
    content: 'medium';
  }
}



@media (min-width: 800px) {
  body {
    background-color: #fdf48f;
  }

  h2:after {
    content: 'large';
  }
}



@media (min-width: 1200px) {
  body {
    background-color: #9adbba;
  }

  h2:after {
    content: 'extra-large???';
  }
}





















p {
  opacity: .7;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.