Responsive Footer Design using CSS Flexbox

The footer section is an essential segment of any website design process. We need to think of our website footer as a resource for the visitors. A couple of years back, designers used to design a website footer by giving simple copyright info at the end of any site. Now the trend has changed recently, and developers use a big footer section above the copyright info and include some more information and some social media links of the website so that the visitor knows even better than before about the company. That information or links help the visitor solve their problem and give them the proper guidance they need. We are going to design a responsive footer using HTML and CSS flexbox layout module.

In this project of responsive footer design, we will have two different columns. The first column will have a company logo and some random text as info for the company. The second column will have some social media links to the company. Inside the second column, we will see three different columns. In the first and second columns where we will put some links for the visitor to get some vital info about the company, and last, not the least is the ''legal'' column where we will provide a privacy policy, contract, and terms of use of the company. In the footer bottom part, we will provide the copyright text mentioning the name of the company.



First, we will start with HTML markup. I have taken a header tag at first, and inside that, I provided a paragraph tag with a text "content." We are designing the footer part for this project, so with the text "content'', I tried to mean all the website content above the footer section. After that, I have taken a footer tag with a class name ''footer,'' In the footer, I have divided the contents into three different segments. There will be a logo and some introductory info text for the company. The next part will provide essential links to the website. Finally, in the last piece, we will write the company's copyright text in the footer bottom.

you may also like:

• Bootstrap 4 Navigation Bar with Slider
• Ribbon Style Navigation Menu
• Animated Typewriter text effect

In the CSS the part, we will first give a box-sizing property to all the elements using the universal selector so that the aspects of the project get padding in their width and height. I used Poppins as a primary font-family for the program. I used the display flex property to align the footer elements and used standard CSS to give the footer background and styling all the other features.  For making the footer responsive, I used CSS media queries to change the mobile device's looks. There will be five different parts in the footer top part and a footer bottom part in a single column in the bottom, for the desktop view. But on the mobile view, each of those will align one after another.

Responsive Footer Design using CSS Flexbox (Source Code):

For the production of this snippet, we have to generate two different files. The Initial one is the HTML File, and the other one is the CSS file. You need to copy the HTML And CSS code given below and paste them to the appropriate files and save them. After that, run the project in your browser and modify according to your need.

HTML:

<header> <p> content</p> </header> <footer class="footer"> <div class="l-footer"> <h1> <img src="https://i.postimg.cc/y62wcLBq/logo.png" alt=""></h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam atque recusandae in sit sunt molestiae aliquid fugit. Mollitia eaque tempore iure sit nobis? Vitae nemo, optio maiores numquam quis recusandae.</p> </div> <ul class="r-footer"> <li> <h2> Social</h2> <ul class="box"> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Pinterest</a></li> <li><a href="#">Dribbble</a></li> </ul> </li> <li class="features"> <h2> Information</h2> <ul class="box h-box"> <li><a href="#">Blog</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Sales</a></li> <li><a href="#">Tickets</a></li> <li><a href="#">Certifications</a></li> <li><a href="#">Customer Service</a></li> </ul> </li> <li> <h2> Legal</h2> <ul class="box"> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Use</a></li> <li><a href="#">Contract</a></li> </ul> </li> </ul> <div class="b-footer"> <p> All rights reserved by ©CompanyName 2020 </p> </div> </footer>


CSS:

*, *:before, *:after { box-sizing: border-box; } body { font-family: poppins; margin: 0; display: grid; font-size: 14px; } header p { padding: 50px; text-align: center; color: #bebebe; text-transform: uppercase; font-size: 65px; font-weight: 700; } .footer { display: flex; flex-flow: row wrap; padding: 50px; color: #fff; background-color: darkblue; } .footer > * { flex: 1 100%; } .l-footer { margin-right: 1.25em; margin-bottom: 2em; } h2 { font-weight: 400; font-size: 15px; } .footer ul { list-style: none; padding-left: 0; } .footer li { line-height: 2em; } .footer a { text-decoration: none; } .r-footer { display: flex; flex-flow: row wrap; } .r-footer > * { flex: 1 50%; margin-right: 1.25em; } .box a { color: #999; } .h-box { column-count: 2; column-gap: 1.25em; } .b-footer { text-align: center; color: #999; padding-top: 50px; } .l-footer p { padding-right: 20%; color: #999; } @media screen and (min-width: 600px) { .r-footer > * { flex: 1; } .features { flex-grow: 2; } .l-footer { flex: 1 0px; } .r-footer { flex: 2 0px; } }


That's the end of this tutorial. I hope it helps. Please follow this blog on our Twitter and Facebook Group to stay updated for the future posts.