I am struggling to eliminate the excess white space below the body of my web page in order to make it fit perfectly within the view of a web browser. Adding height helps with vertical alignment but leaves unwanted white space.
I need a solution that doesn't involve hiding overflow-y, as this interferes with the responsiveness of the code.
Previously, setting the body and HTML to 100% caused issues with vertically aligning the container.
If you visit the page on Github at the following link, you will notice the white space that I'm trying to remove:
Here is a snippet of the key HTML code I've been working with:
<body>...
<header>...</header>
<main>
<div class="container" id="index">
<section>
<h1>Web Designer in London</h1>
<h2>I create beautiful websites that are easy to use on mobile and desktop.</h2>
<a href="work.html"><button class="btn-dark">View Work</button></a>
</section>
</div>
</main>
</body>...
Below is some relevant CSS code:
html {
height: 100%;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 18px;
color: var(--secondary-colour);
background: linear-gradient(130deg, var(--main-colour) 0%, var(--main-colour) 20%, #000a18 100%);
background-image: url('../img/city.svg'), linear-gradient(130deg, var(--main-colour) 0%, var(--main-colour) 20%, #000a18 100%);
background-repeat: no-repeat;
background-position: 50% 100%;
line-height: 1.7em;
height: 100%;
padding: 1em;
margin: 0;
}
.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
align-items: center;
height: 100%;
justify-content: center;
}
main {
height: calc(100% - 2em);
}
The goal is to have no white space visible anywhere on the webpage, but currently there is still unwanted whitespace present.