Time for action—adjusting the text size on phones in landscape mode

You'll remember that when we looked at the site on a phone in landscape mode, the text looked a little large. Let's correct that now. Perform the following steps for doing so:

1. 1. First, we will find the media query for this screen size as follows:

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

   There will be code between those curly brackets, which I haven't shown here because we don't need to work with it for this task.

2. 2. Above the rest of the code for this media query, we will add a line of code to adjust the font size for the whole site. We will write it above, because it sets styling for an element very high up in the document tree, and any text sizing we want to set for other elements will have to come after it if it's going to work.

   /*adjust font sizing*/
   body {
   font-size: 12px;
   }
   

3. 3. This sets the base size at 12 pixels to make all the text in the site a bit smaller. Let's see what effect it...