Here’s my product landing page.
I encountered a number of challenges in this project and need to pick your brains regarding these issues:
Background image - I’ve set 100vh for the background image in the first section. Yet when I view it on screens with different heights, the image always extends a little past the bottom of the screen. Why doesn’t it cover the screen exactly?
The video has black horizontal bars at the top and bottom. They’re not visible on my mobile screen though. Is there a way to get rid of them when viewing on larger screens?
Length - is there a guiding principle on when to use percentage, rem, em and px? I see that coders tend to use percentage for margin… And when would I choose to use px over rem or em over rem?
Margin vs padding - Often times, I find myself feeling unsure when I should set a margin instead of a padding (and vice versa) or set both. What should I be asking myself when giving space to elements?
Oops, one more question:
5) How do I fix the section headbutting problem? When I click on a nav link, it takes me to the section but part of it is hidden under the fixed header, so part of the section’s heading is cut off.
Looking forward to hearing your advice! Thanks!