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.

1<div class='leading-sentence'>
2  <p class='large-only'>You’re reading a sample site, written by Makzan since 2014. Enjoy!</p>
3  <p class='medium-only'>A sample site, written by Makzan since 2014.</p>
4  <p class='small-only'>A sample site by Makzan.</p>
5</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.

 1$break-point-medium: 400px;
 2$break-point-large: 600px;
 3
 4.leading-sentence {
 5  text-align: center;
 6}
 7
 8@media screen {
 9  .small-only {
10    display: block;
11  }
12  .medium-only,
13  .large-only {
14    display: none;
15  }
16}
17
18@media screen and (min-width:$break-point-medium) {
19  .medium-only {
20    display: block;
21  }
22  .small-only,
23  .large-only {
24    display: none;
25  }
26}
27
28@media screen and (min-width:$break-point-large) {
29  .large-only {
30    display: block;
31  }
32  .small-only,
33  .medium-only {
34    display: none;
35  }
36}

What’s next? We’re going to take a look at “Chapter 7 – Handling touches”.

◀ Adaptive copywriting basecamp Chapter 7 – Handling touches ▶

makzan.

Adaptive copywriting for different screens

Makzan | Mobile web design | Table of Content