I recently put together a simple webpage using a tutorial I found online. The layout includes two videos and two images arranged in a horizontal column, with the potential for more images to be added later on. Everything was looking good until I inserted the images below the videos and title. Unfortunately, this caused the video and title to get cut off and prevented me from scrolling up properly. I suspect the issue lies within the wrapper id in my CSS code. I would greatly appreciate any guidance on how to rectify this problem and ensure that my content displays correctly.
Below is the code snippet:
@charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: auto;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(-200deg, #FEDD00, #FF6C2F);
...
<body>
<div class="container">
<input type="checkbox" id="active">
<label for="active" class="menu-btn"></label>
<div class="wrapper">
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="3d.html">3D</a></li>
...
</div>
...
</body>This is how the page should look:
https://i.sstatic.net/xfOo0.jpg
Here's a preview of the menu appearance:
https://i.sstatic.net/kdkjf.jpg
However, once I add the extra images as highlighted in the code, the title and top video end up being cutoff and I lose the ability to scroll upwards: