Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Used max-width and display Flex

@occult-hues

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I need to work on centering the div. Found min-height, flex display bit difficult to understand.

Community feedback

P

@12Kentos

Posted

Hey @occult-hues,

Nice job on the project, I know you didn't actually ask a question, but figured I'd add my two cents! :)

Setting a min-height of 100vh on the body, is simply telling the body element (Which makes up the majority of the website) to always have a minimum of 100vh. This way no matter what screen opens your website, regardless of if it is a 1920 X 1080 or a 1440 X 900, the body will always fill that screen size.

As for the flex part, this is essentially saying "with the given size (which we just gave it the entire monitor) place the item in the middle." That's the great thing about flexbox and grid, they will automatically do the math for us. :)

Here's a great video by Kevin Powell on Flexbox, it should really help you understand it better.

Kevin Powell Flexbox

Here is a great site as well to practice your flexbox skills. (It's also completely free)

Flexbox Froggy

If you would also like to learn about Grid, I can send some resources for that your way as well, keep up the great work! I promise it will get easier to understand what is going on as you keep practicing! :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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