Product Landing Page - questions

Code Feedback
1

Hi there,

Here’s my product landing page.

I encountered a number of challenges in this project and need to pick your brains regarding these issues:

  1. 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?

  2. 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?

  3. 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?

  4. 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!

2

Works well for me. :sparkles:

Not sure about viewport height regarding the background image. I can’t reproduce the error you are seeing.

No idea about the video. Did you try a different video from another service?

Length. All depends on how you want your page elements to behave. Do they need to be close to the left edge or always centered. Flexbox justify-content helps with this nowadays.

Margin - space outside the element. https://developer.mozilla.org/en-US/docs/Web/CSS/margin
Padding - space inside the element. https://www.w3schools.com/cssref/tryit.asp?filename=trycss_padding