Currently, I am working on creating a portfolio page where the initial page opens with a height of '100vh' and width of '100%', which seems to be functioning correctly. However, I am facing an issue where I am unable to scroll down to view other elements on the page that I have placed below this initial section. It appears as though this section is taking up the entire page space and causing other elements to disappear.
return(
<div>
<Navbar/>
<section className="valign-wrapper" style={{height: '100vh',width:'100%'}}>
<div className="center-align" style={{width:'100vw'}}>
<h1 className="animate__animated animate__fadeInDown">Hi, I'm Chijindu</h1>
<div>
<h3 style={{display:'inline-block',marginRight:'8px',marginTop:'-20px'}} className="animate__animated animate__fadeInLeft">a frontend </h3> <h3 style={{display:'inline-block',marginTop:'-20px'}} className=" green-text animate__animated animate__fadeInRight">developer...</h3>
</div>
</div>
</section>
<div class="row red">
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s1">3</div>
<div class="col s1">4</div>
<div class="col s1">5</div>
<div class="col s1">6</div>
<div class="col s1">7</div>
<div class="col s1">8</div>
<div class="col s1">9</div>
<div class="col s1">10</div>
<div class="col s1">11</div>
<div class="col s1">12</div>
</div>
</div>
)
The section tag has been set with viewport height and width properties. Despite zooming out or checking browser inspection, none of the rows or columns below are visible, and scrolling downwards is not possible. Apologies for the excessive inline styling present in the code. Any assistance on resolving this issue would be greatly appreciated.
UPDATE: Additional background styles have been added with uncertain effects:
.valign-wrapper {
background: url('./img/img001.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Could these background styles possibly be affecting the visibility of other elements on the page?