The last part is thefooter, and, for most websites, it's just a list of links. It's usually displayed it as a simple vertical list; it's not as sophisticated as the header menu we created.
First, we will need to remove the height value we set in the footer; to do that, we can simply replace it with the auto value:
/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
footer .container {
height: auto;
}
}We also need to display the links in a vertical way by setting the direction of the flexbox, as we saw earlier:
/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
footer .container {
flex-direction: column;
height: auto;
}
}The next step will be to change the value of the display we set on our<li>:
footer .main-nav li, footer .right-nav li {
list-style-type: none;
display: inline-block;
}
/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
footer .main-nav li, footer .right...