Whenever I resize the page to fit a mobile device, there is always a large gap at the bottom.
I want the content to stack normally when it shrinks, without leaving a huge gap at the bottom.
There is no gap at the bottom when viewed on desktop, but as soon as I shrink it down, the stacking behavior introduces a big gap at the bottom.
This is what's happening in the image: https://i.sstatic.net/rRIRt.jpg
.song-box {
width: 300px;
margin: 20px;
position: relative;
vertical-align: top;
}
.flex-container {
width: 1700px;
display: flex;
flex-wrap: wrap;
}
.flex-container img {
opacity: 0.5;
}
.flex-container img:hover {
opacity: 1;
}<div class="flex-container">
<div class="song-box">
<img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
<!-- More similar code blocks here -->
</div>the body
body {
margin: 0;
padding: 0;
background: url(/images/party.jpg);
/* background-size: 100%; */
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}