My goal is to have 20 items on the grid of this page, each taking up full width and height with a fluid layout.
Currently, I have successfully set up the page with 20 items spanning full width in a fluid design. However, the content of the grid is being pushed down by the height of the navbar (80px). To prevent vertical scrolling, I had to offset the grid section by the negative height of the navbar using CSS:
.negative-navbar-offset {
margin-top: -80px;
}
The issue with this approach is that the top portion of the items in the first row gets hidden behind the navbar, creating problems for users on smaller devices.
You can view the page in question here:
So far, I've attempted the following solutions:
- Setting html and body at 100%
- Using a grid container set to 100vh and 100vw
- Applying calc(100% - 80px) to the grid container;
Any assistance or guidance would be greatly appreciated. Thank you.