Is there a way to adjust content for a page using an overlay grid without exceeding the body boundaries? I'm facing this issue and struggling to find a solution. I've attempted to make a body reference in CSS and adjust the height, but no progress has been made. Here's the code snippet:
header {
height: 900px;
background-image: url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
... (more CSS code)
<header>
<h1> <img style="vertical-align:middle" src="img/focus.png" /><span class="Header-Type">Focus</span></h1>
<p>A landing page for your app with focus</p>
</header>
<div class="Down-Arrow">
<img src="img/down-arrow.png" />
</div>
... (more HTML code)