Time for action—changing our footer layout for phones
For phones in either orientation, what we want to do is remove the floats and make each a part of the footer of full width so that the text doesn't wrap between lines. We'll do this by writing the CSS within our media query for phones in landscape mode, which will also affect phones in portrait mode. Perform the following steps:
1. First, let's find our media query for phones in landscape mode. There's quite a bit in it now as follows:
/*smartphones in landscape mode*/ @media screen and (max-width: 480px) { /*tidy up the header*/ #site-title img { width: 75%; } #header-right address h2 { font-size: 16px; } #header-right #socialmedia img { height: 20px; margin: 5px 1% 0 0; } #header-right .CTA { width: 130%; font-size: 16px; padding: 0.8em 0.8em 0.8em 40px; margin: 20px 3% 5px 0; } #header-right .CTA img { width: 15%; } /*navigation bar*/ #access { font-size: 14px; text-align: center; margin-top: 10px; } #access a { line-height: 2.5em; display...