3. Style the Main Layout Blocks for Small Screens

I’ll start by adding some widths and floats for the main elements, to ensure that they stretch across the screen. I add some widths and a clear:both declaration to the relevant elements:

Next, to avoid the design looking squeezed into the small screen, I’ll add padding to some elements:

Note that these are the only horizontal values I’ll be defining in pixels, and I do this because I don’t want the padding to become too big as the screen size increases.

Now the site looks less crowded and the main elements are displayed beneath each other:

Next I’ll tidy up the widget areas and improve the navigation.