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

Let's fix those problems. Perform the following steps for doing so:

1. 1. We already have a media query for phones in portrait mode as follows:

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

   Let's start by making the address a bit bigger:

   #header-right address h2 {
   font-size: 18px;
   }
   

2. 2. We will then move on to adding some extra margins around the icons to reduce the risk of tapping the wrong one as follows:

   #header-right #socialmedia img {
   height: 30px;
   margin: 10px 3%;
   }
   

3. 3. And next, we will make the call to action button larger by simply making the text bigger, as well as tweaking the margins to reduce the risk of clicking in the wrong place as follows:

   #header-right .CTA {
   font-size: 16px;
   margin: 10px 3% 10px 0;
   }
   

4. 4. We'll then move on to the navigation, which you'll remember is simply too small for reading or tapping on. Let's add some code to make the text bigger as follows:

   /*increase size of...