Time for action—setting up text sizing in our media queries

To set up text sizing in our media queries, perform the following steps:

1. 1. First, we need to identify the code in our media queries that relates to text sizing. The following is just the text size-related code from the media queries in our stylesheet:

   /*iPads in portrait mode*/
   @media screen and (max-width: 768px) {
   #access {
   font-size: 18px;
   }
   }
   /*smartphones in landscape mode*/
   @media screen and (max-width: 480px) {
   #header-right address h2 {
   font-size: 16px;
   }
   #header-right .CTA {
   font-size: 16px;
   }
   /*navigation bar*/
   #access {
   font-size: 14px;
   }
   }
   /*smartphones in portrait mode*/
   @media screen and (max-width: 320px) {
   #header-right address h2 {
   font-size: 16px;
   }
   /*increase size of navigation text*/
   #access {
   font-size: 17px;
   }
   }
   

   As you can see, the main area where we resized the text was in the header and the menu.

2. 2. Next, we will change those pixels to ems. You'll notice that I have left one element styled using pixels—I'll...