I have a lot of white space after the last div (the last div-image is somewhere at the middle of page)
What seems to somehow cure this is resizing the window and making it full again - not entirely but better nonetheless
The markup look like this:
<div class="parent">
<div data-enllax-ratio="0.1" class="d1"></div>
<div data-enllax-ratio="-.1" data-enllax-type="foreground" class="d2"></div>
<div data-enllax-ratio="0.6" data-enllax-type="foreground" class="d3"></div>
<div data-enllax-ratio="1.4" data-enllax-type="foreground" class="d4"></div>
<div data-enllax-ratio="1.6" data-enllax-type="foreground" class="d5"></div>
<div data-enllax-ratio="-.2" data-enllax-type="foreground" class="d6"></div>
<div data-enllax-ratio="1.2" data-enllax-type="foreground" class="d7"></div>
<div data-enllax-ratio="-.3" data-enllax-type="foreground" class="d9"></div>
</div>
The body looks somehow like this:
body {
margin: 0;
background-color: var(--color-bg);
font-size: 1.5rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
}
The parent:
.parent {
display: flex;
flex-direction: column;
flex-shrink: 0;
margin: auto;
position: relative;
}
The last two divs:
.d7 {
background: url(/wp-content/uploads/2019/11/mock_1x.jpg);
height: 1200px;
margin: 0 auto;
padding: 0;
width: 60%;
z-index: 200;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
left: 21%;
top: 2400px;
}
.d9 {
background: url(/wp-content/uploads/2019/11/px3.jpg);
height: 1200px;
margin: 0 auto;
padding: 0;
width: 45%;
z-index: 100;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 2500px;
opacity: 0.4;
}
The enllax property is from a parallax plugin which I don't know very well - I don't really know if this has to do with my problem or it's just a CSS mistake. - the code for js plugin is here
What I am missing here? It might be a rookie mistake but I'm not a pro so this could have happened very easily.
Thank you!