How To Create A Responsive Footer Using Html And Css

Header and footer are two parts of a website that must be present to make the website up to standard. In this short and concise tutorial, we will learn how to create a responsive footer the same way we learn how to create a responsive navbar using Html and Css. Let’s get started.

First we need to create the footer structure in Html

Step 1 : creating the footer structure in Html

HTML

<footer class="footer">
      <div class="footer-content">
        <div class="footer-column">
          <h3>About Us</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="footer-column">
          <h3>Services</h3>
          <ul>
            <li>Service 1</li>
            <li>Service 2</li>
            <li>Service 3</li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>Contact Us</h3>
          <p>123 Main Street, City, Country</p>
          <p>Email: info@example.com</p>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2023 Your Website. All rights reserved.</p>
      </div>
    </footer>

We have successfully created footer but it is not looking good from my own view. To make it look good and responsive, we will add Css.

Step 2 : Adding Css To Make The Footer Responsive

CSS

. .footer {
      background-color: #f4f4f4;
      padding: 20px;
    }
    .footer-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .footer-column {
      flex-basis: 30%;
      margin-bottom: 20px;
    }
    .footer-column h3 {
      margin-bottom: 10px;
    }
    .footer-column ul {
      list-style: none;
      padding: 0;
    }
    .footer-bottom {
      text-align: center;
      margin-top: 20px;
    }
    @media (max-width: 768px) {
      .footer-column {
        flex-basis: 100%;
      }
    }

We have also made a detailed tutorial on how to create a responsive Navbar using Html and Css, you can check it after completing this tutorial

Css Code Explanation

The “footer class” sets the background color and padding for the footer.

The “footer-content” class sets the display to flex and enables wrapping of the columns using flex-wrap: wrap. It also sets the spacing between columns using justify-content: space-between.

The “footer-column” class sets the width of each column using flex-basis: 30%, and adds a margin-bottom for spacing between columns. Adjust the flex-basis value to control the width of the columns. In the media query, when the viewport width is less than or equal to 768px, the .footer-column class is modified to occupy the full width using flex-basis: 100%.

The .footer-bottom class styles the bottom part of the footer, setting the text alignment to center and adding a margin-top for spacing.

Exercise

You are not limited to using just these styles added above, your task is to customize the HTML content, CSS styles, column widths and footer colors to create your own footer design. So this is just the simple way you can create a responsive footer using Html and Css