ptg16476052Understanding the Mechanics of RWD 45916
As you can see, there are now two columns, but they are very narrow and hard to read.
So this is a candidate for a breakpoint. We know that having no styles looks fine on the
iPhone as far as the layout goes, so our breakpoint needs to be around 400 pixels:
Input ▼
@media ( min-width: 400px ) {
#main {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
aside {
-webkit-column-break-before: always;
break-before: always;
}
}
Figure 16.5 shows how this style sheet looks on a desktop browser.
Output ▼
And Figure 16.6 shows how it appears on an iPhone.
FIGURE 16.5
The layout in
Chrome has two
columns.