Time for action—adjusting the header for iPads

In the previous chapter we've already set a media query for iPads as follows:

/*iPads in portrait mode*/
@media screen and (max-width: 768px) {
#access {
font-size: 18px;
}
}

We're going to add some more CSS to that media query for our header.

We'll start with the header layout. I'd like to make the logo a little larger to better fill the space, while at the same time making the social media icons and the call to action button smaller so that the header isn't as deep. Perform the following steps for doing so:

1. 1. Firstly, the code for the logo, which is contained in an element with the ID of #site-title as follows:

   #site-title img {
   width: 75%;
   }
   

   This increases the width of the image to 75 percent of the width of its containing element.

2. 2. Now for the social media icons, which are contained in a div element with the ID of #socialmedia. Let's add some code to make them a bit smaller as follows:

   #socialmedia img {
   height: 25px;
   margin: 7px 0 7px 10px...