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

QR Component Challenge

Tristan 10

@tristanjtate

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


What are you most proud of, and what would you do differently next time?

I am proud that I was able to complete the project with little help from external resources. I am also proud that I was able to take a design and implement it!

What challenges did you encounter, and how did you overcome them?

I had trouble with the positioning/centering card for mobile and Desktop. I was able to find a solution so the card wasn't pushed down on the screen. I made the body 80vh and margin auto which helped solve my problem.

What specific areas of your project would you like help with?

Honestly, better understanding vh and when to actually use rem/em. I've read up on these and I am still fuzzy on when to implement!

Community feedback

@KapteynUniverse

Posted

Hey, nice job.

To center the item you can use flex or grid

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

or

body {
display: grid;
place-content: center;
min-height: 100vh;
}

Which you already did the first one but giving qr-component to margin: auto; caused it to go bottom of the body.

vh and vw are viewheight and width, 1 vh is 1% of the current screen

Kevin Powell have some videos about em/rem units. You can check them, this one probably give you an idea. But most of the times we will use rem.

Also use a modern css reset for future projects.

Marked as helpful

1

Tristan 10

@tristanjtate

Posted

YOU are awesome. Thanks for the feedback! Currently reading & reviewing the modern css reset. Thanks for the support and the resource.

@KapteynUniverse

1

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