Submitted 12 months ago

Baby's first QR component

Corina• 30

@Dangerina

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

On my laptop I'm seeing a tiny scroll despite setting the body height to 100vh. Is there a different way to approach this to prevent that?
This is also my first project (!!!) so I'm not confident about my git commits. How often/what kind of progress do you get done before a commit?

Thank you for your feedback :)

Community feedback

Moises Salazar• 70

@rtlsalazar

Posted 12 months ago

Hi Corina! , The tiny scroll is due to the default 8px margin on the body element; this is included by the browser and has to be manually set to 0px, with: "body{margin: 0;}". By doing that, the scroll disappears. To avoid this kind of problem, it is very common practice to include a "reset.css" file (https://meyerweb.com/eric/tools/css/reset/) that automatically removes the default styles from the browser (including the margins), letting you decide for it.

Marked as helpful

Corina• 30

@Dangerina

Posted 12 months ago

Awesome! Thank you! I'll use a reset going forward. @rtlsalazar

Kaik Code• 70

@SoberanoCode

Posted 12 months ago

There is no need to include "height" in the body's syntax. I sincerely hope that I was able to assist you.

Corina• 30

@Dangerina

Posted 12 months ago

If I remove the body's height, then my card doesn't sit in the center of the screen vertically. I think it's because I'm using flexbox maybe? @SoberanoCode

Kaik Code• 70

@SoberanoCode

Posted 12 months ago

In the body, you can use "margin-top: 5%" and start CSS with: (*) { margin: 0; padding:0; box-sizing:border-box; } for global settings

Marked as helpful

matias• 400

@strikes7

Posted 12 months ago

@Dangerina it's better to set min-height: to 100vh (viewport height ) to allow the body to grow in case there are more elements, and a quick way to center an element is set in the parent display: flex; align-items: center; justify-content: center;

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord