The Navbar is planned to always appear. The div where the conditional rendering occurs uses a min-h-screen Tailwind class. This creates extra space that can be scrolled and offsets the hero page content. This will occur on any page that has minimal content.
Steps to Reproduce
npm run dev and open the localhost on any screen with any browser
Expected Behavior
The div should be distributed across the remaining space of the page, accounting for the Navbar
Actual Behavior
Extra space is created and offsets the Hero content, as narrated in the Description
Possible Solution
Remove the Tailwind min-h-screen class. Create a class in globals.css to calculate the min-height based on the vh - the height of the navbar (and set the height of the navbar to the 4rem that is currently its default daisyUI min-height). 2) Do the same with the height of the Navbar and experiment with using Tailwind's flex-1 class for the div, but this might not work/could get complicated. The first solution is probably the easiest albeit less consistent with Tailwind.
Tasks
[x] Set the Navbar height to 4rem with Tailwind. It doesn't need to change for any screen.
[x] Use one of the suggested methods to address the overall issue.
Issue Description
The Navbar is planned to always appear. The div where the conditional rendering occurs uses a
min-h-screenTailwind class. This creates extra space that can be scrolled and offsets the hero page content. This will occur on any page that has minimal content.Steps to Reproduce
npm run devand open the localhost on any screen with any browserExpected Behavior
The div should be distributed across the remaining space of the page, accounting for the Navbar
Actual Behavior
Extra space is created and offsets the Hero content, as narrated in the Description
Possible Solution
Remove the Tailwind
min-h-screenclass. Create a class in globals.css to calculate themin-heightbased on thevh- the height of the navbar (and set the height of the navbar to the4remthat is currently its default daisyUImin-height). 2) Do the same with the height of the Navbar and experiment with using Tailwind'sflex-1class for the div, but this might not work/could get complicated. The first solution is probably the easiest albeit less consistent with Tailwind.Tasks
heightto4remwith Tailwind. It doesn't need to change for any screen.