Having trouble with the footer's responsiveness when resizing the desktop window. It looks fine in developer tools, but in different browsers, the footer placement gets messed up and scrolls over the rest of the content. Any insights on what might be causing this?
Check out the sample site here: View the code here: https://github.com/uniqueusername/dsn
HTML:
<body>
<div id="content">
<section class="helvetica">
<div class="image-wrapper logo">
<img src="./resources/images/dsn-designs.png">
</div>
<div class="image-wrapper">
<img src="./resources/images/dsn.jpg">
</div>
</section>
<section class="helvetica">
<p><h2>Welcome.</h2></p>
</section>
<footer>
<section class="bottom">
<p><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="650d0009090a2501100b06040b480b0012071c4b060a4b0b1f">[email protected]</a>" class="push link-green" target="_blank"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d15181111123d1908131e1c135013180a1f04531e12531307">[email protected]</a></a></p>
</section>
</div>
</footer>
CSS:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: calc(14px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));
letter-spacing: 0.08em;
line-height: 1.3em;
background: #9fab9d;
color: white;
position: relative;
}
#content {
margin: calc(2vw + 20px);
}
section {
margin-bottom: 2em;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: ;
color: white;
text-align: left;
}
section.bottom {
margin-left: calc(2vw + 20px);
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}