Responsive Footer Design Using HTML CSS

Written by April 26, 2026 6 min read 0 Comments

Today I created a modern responsive footer design using HTML and CSS. This footer section is clean, professional, and fully optimized for all screen sizes including desktop, tablet, and mobile devices. The layout is built using CSS Grid for better alignment and spacing.

The footer contains 4 useful columns. The first column includes the website logo, short business description, and social media icons such as Facebook, Instagram, Twitter, and LinkedIn. The second column contains a quick navigation menu with important links like Home, About Us, Services, Blog, and Contact. The third column is used to display business services such as Web Design, Development, SEO Service, UI/UX Design, and Marketing. The fourth column includes contact details like address, phone number, email, and working hours.

I also added hover effects on links and social icons to make the design more attractive and interactive. The footer background uses a dark theme with light text for a premium modern look. On smaller screens, the footer automatically changes into a mobile-friendly layout for better readability and user experience.

This responsive footer design is perfect for business websites, agency websites, portfolio websites, blog websites, and company landing pages. It is lightweight, fast loading, and easy to customize according to any project needs.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Footer Code By Mycodingtutorial</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

    <div style="height:300px;"></div>

<footer>
<div class="container">

<div class="footer-grid">

<!-- Column 1 -->
<div class="footer-box">
    <h2>Mycodingtutorial</h2>
    <p>
        We create modern websites with responsive layouts, fast loading speed and premium design experience.
    </p>

    <div class="social-icons">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-linkedin-in"></i></a>
    </div>
</div>

<!-- Column 2 -->
<div class="footer-box">
    <h3>Quick Menu</h3>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

<!-- Column 3 -->
<div class="footer-box">
    <h3>Services</h3>
    <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Development</a></li>
        <li><a href="#">SEO Service</a></li>
        <li><a href="#">UI/UX Design</a></li>
        <li><a href="#">Marketing</a></li>
    </ul>
</div>

<!-- Column 4 -->
<div class="footer-box">
    <h3>Contact Details</h3>
    <ul class="contact-info">
        <li><i class="fas fa-map-marker-alt"></i> Panipat, Haryana</li>
        <li><i class="fas fa-phone"></i> +91 98765 43210</li>
        <li><i class="fas fa-envelope"></i> info@example.com</li>
        <li><i class="fas fa-clock"></i> Mon - Sat: 9AM - 6PM</li>
    </ul>
</div>

</div>

<div class="footer-bottom">
    © 2026 All Rights Reserved | Designed By MyCodingTutorial
</div>

</div>
</footer>

</body>
</html>

You will also like this post

styles.css

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
}

footer{
    background:#111;
    color:#fff;
    padding:60px 20px 20px;
}

.container{
    max-width:1200px;
    margin:auto;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.footer-box h2,
.footer-box h3{
    margin-bottom:20px;
    font-size:22px;
}

.footer-box p{
    color:#ccc;
    line-height:1.7;
    font-size:15px;
}

.footer-box ul{
    list-style:none;
}

.footer-box ul li{
    margin-bottom:12px;
}

.footer-box ul li a{
    color:#ccc;
    text-decoration:none;
    transition:0.3s;
}

.footer-box ul li a:hover{
    color:#00bcd4;
    padding-left:5px;
}

.social-icons{
    margin-top:20px;
}

.social-icons a{
    display:inline-block;
    width:38px;
    height:38px;
    line-height:38px;
    text-align:center;
    background:#222;
    color:#fff;
    border-radius:50%;
    margin-right:8px;
    transition:0.3s;
}

.social-icons a:hover{
    background:#00bcd4;
}

.contact-info li{
    color:#ccc;
    line-height:1.8;
}

.contact-info li i{
    margin-right:10px;
    color:#00bcd4;
}

.footer-bottom{
    text-align:center;
    border-top:1px solid #333;
    margin-top:40px;
    padding-top:20px;
    color:#aaa;
    font-size:14px;
}


/* Tablet */
@media(max-width:992px){
.footer-grid{
    grid-template-columns:repeat(2,1fr);
}
}

/* Mobile */
@media(max-width:576px){

.footer-grid{
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.footer-box{
    text-align:left;
}

/* Logo full width */
.footer-box:nth-child(1){
    grid-column:1 / -1;
}

/* Contact full width */
.footer-box:nth-child(4){
    grid-column:1 / -1;
}

.footer-bottom{
    text-align:left;
}

}

Conclusion

In conclusion, this responsive footer design is simple, modern, and perfect for any website. It improves navigation, displays important information, and works smoothly on all devices.

Tags:

Post Rating

6.4 / 10

User rating: 6.4 / 10

Rate this post

Click a number to rate this article.

About the Author

You will also like this post

Conclusion

Related Posts