Time for action—adjusting the header layout for phones in landscape mode

The following screenshot is showing smartphones in landscape mode, which has a screen width of 480px. Let's see how our full front page looks at this width now that we've set our media query for screens smaller than 768px, which will—don't forget—affect this screen size, too.

It's still not looking good—the header takes up a lot of room and the call to action button wraps onto three lines of text. Let's make some improvements. Perform the following steps for doing so:

1. 1. In the previous chapter we added a media query for smartphones in landscape mode, but didn't add anything to it. Let's start by finding that:

   /*smartphones in landscape mode*/
   @media screen and (max-width: 480px) {
   }
   

2. 2. First let's focus on the header. We will add the following code snippet within the curly brackets of the media query:

   /*tidy up the header*/
   #site-title img {
   width: 75%;
   }
   #header-right address h2 {
   font-size: 16px;
   }
   #header-right #socialmedia...