Skip to content
Submitted 30 days ago

QR Component Challenge

Tristan•60
@tristanjtate
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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•2,170
    @KapteynUniversePosted 30 days ago

    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•60
    @tristanjtatePosted 30 days ago

    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

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