Adaptive copywriting for different screens

Here is an example showing how we can create the same effect of adaptive copywritings.

See the Pen Copywriting for different screens [Animated Demo] by Thomas Seng Hin Mak (@makzan) on CodePen.

We need the following HTML which defines explicitly what content to display for specific screen size.

<div class='leading-sentence'>
  <p class='large-only'>You’re reading a sample site, written by Makzan since 2014. Enjoy!</p>
  <p class='medium-only'>A sample site, written by Makzan since 2014.</p>
  <p class='small-only'>A sample site by Makzan.</p>
</div>

Then, all we need to do is to control the visibility of the class large-only, medium-only and small-only, via the following CSS.

$break-point-medium: 400px;
$break-point-large: 600px;

.leading-sentence {
  text-align: center;
}

@media screen {
  .small-only {
    display: block;
  }
  .medium-only,
  .large-only {
    display: none;
  }
}

@media screen and (min-width:$break-point-medium) {
  .medium-only {
    display: block;
  }
  .small-only,
  .large-only {
    display: none;
  }
}

@media screen and (min-width:$break-point-large) {
  .large-only {
    display: block;
  }
  .small-only,
  .medium-only {
    display: none;
  }
}