Solution for QR Code Component

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 months ago

  Hello @juss-10!

  Your solution looks great, man!

  In CSS, height: 100vh and height: 100% represent different concepts and have different behaviors.

  • height: 100vh: This sets the height of an element to 100% of the viewport height. The viewport height is the full height of the user's browser window, regardless of the actual content height. Using 100vh ensures that the element takes up the entire height of the viewport.

  This is often used for creating full-height sections or containers that cover the entire screen, for example, in a hero section or a landing page.

  • height: 100%: This sets the height of an element to 100% of the height of its containing element. It's a relative unit and depends on the height of the parent container.

  In summary:

  height: 100vh sets the height relative to the viewport height.

  height: 100% sets the height relative to the height of the containing element.

  Most projects here we use min-height: 100vh; because they normally ocuppy the window's full height.

  I hope it helps!

  0

  ---

  

  juss-10•40

  @juss-10Posted 10 months ago

  Hello @danielmrz-dev

  Thank you for leaving a comment!

  I did not use min-height: 100vh on body because, to my understanding, this doesn't play nicely with mobile devices? Instead, I used html { height: 100%; } to apply the viewport height to html and then body { min-height: 100%; } to take up the minimum height of the containing block, i.e. html. I also used grid on body to apply main to use 1fr for the row height, which I could then use min-height: 100% on .frontend-mentor (a child of main). Using min-height: 100vh for .frontend-mentor would cause it to push the footer out of view.

  0