15
Images are naturally responsive; the text associated with them is all set in units of rems and will get smaller as the screen narrows. Similarly, the images are all scaled as percentages and will also get smaller as their containers get smaller.
These containers are all held in the central column of a responsive grid that will itself get narrower and eventually collapse into a single full width column.
All this happens automatically, we’ve already made everything responsive in the previous sections.
The only thing left to do is, where images are arranged side-by-side, stack those images one on top of the other (a bit like the column collapse) and like those responsive columns, it’s very easy. We just need to set all the figx-y classes to fill the whole width of the column.
This is done (as in all these cases) with an @media query:
@media only screen and (max-width: 520px) { /* stack columns at <=520 px */
.fig1-2,
.fig1-3,
.fig2-3 { width: 90%;} /* by making all columns 90% */
}
Here, if the screen width is 520 px or less wide (the column collapse point), the width of all the figx-y classes is set to 90%.
Why 90% and not 100%? Well, it just leaves a gap between the image and the edge of the screen.
The only other thing is to remove any margins applied by the fig-col class:
@media only screen and (max-width: 520px) { .fig-col{ margin:0; } }