Responsive Footer
The footer is the last thing users see — it contains navigation links, contact info, social media, and legal text. Build a professional multi-column footer that stacks cleanly on mobile and looks organized on desktop.
Footer Structure
- Multi-column grid — 4 columns on desktop: logo/about, links, links, newsletter/social
- Mobile stacking — Single column on mobile with each section stacking vertically
- Link groups — Column headers with link lists underneath, styled consistently
- Social icons — Row of social media icons/links with hover color transitions
- Newsletter form — Simple email input + subscribe button in a flex row
- Bottom bar — Copyright text with horizontal rule separator. Links to terms/privacy
- Branding — Logo and brief description in the first column
Footer Code
/* Footer */
.footer {
background: #1a1a2e;
color: #a0a0b0;
padding: 60px 24px 24px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.footer-brand .logo {
font-size: 1.5rem;
font-weight: 800;
color: #E44D26;
margin-bottom: 12px;
}
.footer-brand p {
line-height: 1.6;
font-size: 0.9em;
}
.footer-links h4 {
color: white;
margin-bottom: 16px;
font-size: 1em;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
color: #a0a0b0;
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover { color: white; }
.footer-bottom {
border-top: 1px solid #2a2a4a;
margin-top: 48px;
padding-top: 20px;
text-align: center;
font-size: 0.85em;
max-width: 1200px;
margin-inline: auto;
}Tip
Footer link colors should be muted (#a0a0b0) with a white hover transition. This subtle interaction indicates clickability without competing with page content. Column headings should be white to establish visual hierarchy.
Flexbox is ideal for one-dimensional layouts (row or column)
Common Mistake
Using a separate layout approach for footer columns. Use the same repeat(auto-fit, minmax(200px, 1fr)) Grid pattern used throughout the course. The footer is just another responsive grid — it stacks automatically on mobile.
Practice Task
Build a complete footer: (1) 4-column auto-fit grid: brand/about, product links, company links, newsletter, (2) Email input + subscribe button in a flex row, (3) Social media icon row with hover color change, (4) Bottom bar with copyright and legal links.
Quick Quiz
Key Takeaways
- The footer is the last thing users see — it contains navigation links, contact info, social media, and legal text.
- Multi-column grid — 4 columns on desktop: logo/about, links, links, newsletter/social
- Mobile stacking — Single column on mobile with each section stacking vertically
- Link groups — Column headers with link lists underneath, styled consistently