Hey there, I'm currently dipping my toes into the world of HTML and CSS with hopes of creating a visually appealing website. Everything was going smoothly until I reached the footer section. At first glance, it looked perfect but upon zooming in, all the elements in the footer started overlapping each other. Can anyone provide some guidance on how to resolve this issue? Any assistance would be greatly appreciated.
This is what my current footer code looks like:
.footer {
background: #323132;
text-transform: uppercase;
width: 100%;
height: 350px;
color: white;
}
.footer a {
text-decoration: none;
color: #a2a4a7;
font-family: Arial,sans-serif;
font-size: 14px;
}
.vertical-right-1 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 20%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-2 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 45%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-3 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 70%;
box-shadow: 0.2px 0.2px;
} <div class="footer">
<div style="float: left; margin: 0 auto; padding: 10px 0 0 40px;">
<p><a href="#"><strong>Find a Store</strong></a></p>
<p><a href="#"><strong>Sign Up For Email</strong></a></p>
<p><a href="#"><strong>Become A Member</strong></a></p>
<p><a href="#"><strong>Site Feedback</strong></a></p>
</div>
<div class="vertical-right-1">
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;">Need To Talk?</p>
<p><a href="#">Order Status</a></p>
<p><a href="#">Shipping and Delivery</a></p>
<p><a href="#">Returns</a></p>
<p><a href="#">Payment Options</a></p>
<p><a href="#">Contact Us</a></p>
</div>
<div class="vertical-right-2">
</div>
<div style="float:right; margin: 0 auto; width: 330px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;"><strong>Sports</strong></p>
<p><a href="#">Soccer</a></p>
<p><a href="#">Basketball</a></p>
<p><a href="#">NFL</a></p>
<p><a href="#">Tennis</a></p>
</div>
<div class="vertical-right-3">
</div>
<div style="margin:0 auto; width:630px; padding:4px 0 0 0;">
<strong>
<p style="font-family: 'Cabin Condensed', sans-serif; font-size: 20px;">About The League</p>
</strong>
<p><a href="#">News</a></p>
<p><a href="#">Careers</a></p>
<p><a href="#">Investors</a></p>
<p><a href="#">Sustainability</a></p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
<a href="#"><i class="fa fa-facebook"
style="padding: 25px;font-size: 30px; width: 80px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<!-- <a href="#"><i class=&...
</div>Currently dealing with overlapped lines in the footer that are making it look unappealing. It seems fine in full-screen mode but not when zoomed in. Hoping for some assistance!
Thanks in advance!