Time for action—adjusting the footer layout

So, let’s make those tweaks! To tweak the footer, perform the following steps:

1. 1. First we will find the CSS in our media query, which applies to the footer as follows:

   /*change footer layout*/
   #colophon small {
   width: 100%;
   text-align: left;
   }
   

2. 2. We will need to edit this and add some spacing for our social media icons. As we need to remove some of the existing CSS, our final code is as follows:

   footer {
   padding-top: 20px;
   }
   #colophon small {
   font-size: 10px;
   line-height: 1.2em;
   }
   

3. 3. We will click on Update File to save our changes and that’s how the footer is done.

What just happened?

We removed some CSS from our footer so that the two elements float side by side again, we changed the font size, and we added some padding to the top of the footer to allow space for the social media icons.

Let’s have a look at the completed home page of our web app, as shown in the following screenshot:

There we have it—the interface for a web app in line with our original...