Time for action—changing the layout of the menu on small screens

All of the changes we're going to make to our menu will be for phones in either landscape or portrait mode. The first one is to adjust the layout of the menu so that each link is nice and big, and easy to accurately tap on. To change the layout of the menu on small screens, perform the following steps:

1. 1. First, let's find the media query for phones in landscape mode:

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

2. 2. To make the links line up one below the other with a large space between them, we will add the following code snippet:

   /* adjust menu layout */
   access {
   background: none;
   }
   access a {
   display: block;
   margin: 5px 0;
   background: #ccfeff;
   padding: 10px 0;
   }
   

Now let's have a look at what the preceding code snippet does.

What just happened?

We added some code within the media query for phones in landscape mode to alter the layout of the navigation menu. Let's look at the code and identify its...