In the beginning, I constructed a footer using HTML, CSS, and JS. Eventually, I stumbled upon Bootstrap and decided to recreate the footer using Bootstrap, following a mobile-first design approach for screens smaller than 576px.
I had previously designed the footer for medium and large desktop screens using CSS before discovering Bootstrap. After implementing the footer for small screens using Bootstrap, I encountered a challenge when transitioning the layout from small screens to medium and large screens.
My goal was to maintain both designs, but I struggled to do so. While I know how to create the layout for medium and large screens using Bootstrap, I found it challenging to adapt the existing code for small screens to be responsive for medium and large screens.
In essence, the design for medium and large screens should utilize a grid with 1 row and 3 columns of equal width. However, I faced difficulties when trying to adapt my current code to achieve this design.
Code snippet for mobile:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Footer</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
</head>
<body>
<!-- Footer content -->
</body>
</html>
Previous code using CSS only:
<div class="footer-section">
<div class="footer-subscribe">
<h1>Ready To Meet The Future?</h1>
<div class="footer-subscription">
<input class="footer-email" type="email" placeholder="Email Address" />
<button class="footer-subscribe-button" onclick="ClickSubscribe()">Submit</button>
</div>
</div>
<div class="footer-nav">
<!-- Footer navigation links -->
</div>
</div>
CSS Styles:
.footer-container {
<!-- CSS styles for footer container -->
}
footer {
<!-- CSS styles for footer -->
}
@media (max-width: 768px) {
<!-- Responsive CSS styles for smaller screens -->
}
Medium Large Screen Design: View Image
Small Screen Design: View Image
In conclusion, I aim to preserve both designs but face challenges in making them responsive. While I considered creating separate designs and using the `d-md-none` class for small screens, I recognize that this approach is not ideal for responsive design.