Menu
I am trying to make the page fit in the full view of a web browser, but for some reason, I am being left with white space beneath the body. The reason I have added height is that without a height, it doesn't align vertically with flex.
I want to be able to address this without hiding the overflow-y as that doesn't seem to work well with the responsive code.
I have tried making the body and HTML 100%, which was preventing me from vertically aligning the container.
The page is on Github if you wish to see it there. Where you will see a white space beneath everything: http://kaleshe.co.uk/portfolio
Here is a snippet of the main HTML I have been checking whilst testing:
<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>...
Here is some of the relevant CSS:
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);
}
I expect for there to be no white space anywhere. But there is currently whitespace
948
In the linked page, the default margin (set by the user agent stylesheet) of the <ul> element used for the nav is offsetting your <main> element, which creates the white space.
Depending on your preference, you can either remove the default margin of <ul> with or adjust the size of your <main>.
ul {
margin: 0;
}
/* or */
main {
height: calc(100% - 4em);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
