My web-app on react is not displaying full-screen, even though there are very few elements on the page. https://i.sstatic.net/RYc6D.jpg https://i.sstatic.net/yhqey.jpg https://i.sstatic.net/uKuLD.jpg Css:
html {
height: 100%; width: 100%;
}
* {
margin: 0; padding: 0; box-sizing: border-box;
}
body {
min-height: 100vh;
display:block;
position: fixed;
object-fit: cover;
z-index: -2;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("./assets/background-img.png");
background-repeat: no-repeat;
background-position: center top;
background-position-y: -24em;
background-size: 100% 100%;
}
I have also applied some additional styles for h-s, but I don't think that's causing the issue, so I removed them. JSX:
return (
<>
<Navbar />
<div className='header-div'>
<h3 className='text-above'>
------- A HIKING GUIDE
</h3>
<div className='main-text'>
Be Prepared For The Mountains And Beyond!
</div>
</div>
</>
);
I have already tried various solutions in the code, but I am unable to resolve the issue. I hope you can help me figure it out.