The body element has a default margin: 8px.
The herogrid-container element has a margin-top: 180px.
Try working with those. Setting them to 0 helps.
The width: 494px on .img-bookcover is also generating a vertical scroll. Not sure how you want to handle that, but removing that rule solves the problem.
I cant find why your way doesnt work. But this is a working way to get what you want.
.title {
font-family: "Laterlocks DEMO";
display: inline-flex;
font-size: 133px;
background: -webkit-linear-gradient(45deg, #bf787c, #96a1a3 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
:root {
--bg-grey: #e9e9e9;
/*#96A1A3;
#bf787c;
#ddacb2;
*/
}
body {
background-color: var(--bg-grey);
}
img.bookcover {
display: block;
height: 700px;
width: 494px;
}
.hero {
position: absolute;
bottom: 0px;
left: 10vw;
}
.herogrid-container {
max-width: 1250px;
width: 95%;
margin: 0 auto;
display: flex;
flex-direction: row;
gap: 50px;
} <main class="hero">
<div class="herogrid-container">
<div class="heroinner left">
<img src="https://i.imgur.com/36IzNn5.jpg" alt="MPD Psycho Book Cover" class="bookcover">
</div>
<div class="heroinner right">
<p class="title">MPD PSCYHO</p>
</div>
</div>
</main>Find a reset.css file.
Browsers come with default styling and a reset.css file will get rid of those for you. I replaced my index.css so I could design from scratch.
I am not doing anything new, nothing I haven’t done before yet I have this issue. I would love for someone to explain why I even have a scrollbar at this point, why isn’t min-height: 100vh; working? I mean I’ve tried 4 different methods from solutions on overflow it’s still present in the code as well.
.title {
font-family: "Laterlocks DEMO";
display: inline-flex;
font-size: 133px;
background: -webkit-linear-gradient(45deg, #bf787c, #96a1a3 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
:root {
--bg-grey: #e9e9e9;
/*#96A1A3;
#bf787c;
#ddacb2;
*/
}
body {
background-color: var(--bg-grey);
}
html,
body {
height: 100%;
}
img {
display: block;
width: 100%;
}
img.bookcover {
height: 700px;
width: 494px;
}
.hero {
min-height: 100vh;
}
.herogrid-container {
max-width: 1250px;
width: 95%;
margin: 0 auto;
display: flex;
flex-direction: row;
margin-top: 180px;
gap: 50px;
}<main class="hero">
<div class="herogrid-container">
<div class="heroinner left">
<img src="https://i.imgur.com/36IzNn5.jpg" alt="MPD Psycho Book Cover" class="bookcover">
</div>
<div class="heroinner right">
<p class="title">MPD PSCYHO</p>
</div>
</div>
</main>What I tried
min-height: 100vh;
height: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
Please add a sufficient explantion on what you did. An anwser without any explanation is low-quality. It is hard to udnerstand and therefor also ahrd to reproduce as a possible solution.
the issue why it is not working is, that the height of the ehader is 5% with a padding of 20px. Means the paddings alone will require 40px of space. for HD screen, 5% vh translate into ~16px height. As such the header is at least 24px to high and causing an overflow.