Altering the layout of our header

Instead of dealing with each screen size one by one, I'm going to deal with each part of the site in turn instead. There's a very good reason for this, which is the fact that any changes we make to the CSS for a wider screen will have a knock-on effect on narrower screens because of the cascade. So, it's worth making changes to each part of the layout on a wider screen first, then tweaking it for narrower screens before moving on to the next part of the layout.

We'll start by adjusting the header layout on iPads in portrait mode.