Skip to content
Submitted about 2 months ago

QR Code Component

Ammon Quarshie•30
@niiquash
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'm happy to be able to complete this task at all. My only problem is knowing how much value to assign font size and margin/padding to h2 and p elements.

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

As mentioned previously, I thought it was a bit confusing and almost go hacky figuring our a standard font size for the h2 and p elements underneath the qr code.

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

I need help with knowing how to allocate margin and padding values appropriately without being hacky.

Community feedback

  • Huy Phan•2,060
    @huyphan2210Posted about 2 months ago

    Hi, @niiquash

    I took a look at your solution and had a few thoughts:

    • The card doesn't seem to be centered on my 1920x1080 screen. It looks like this is due to the margin: 12em auto on the <article>. There are other ways to center an element, which I'll explain below.
    • Ensure the body takes up at least the full height of the viewport by using min-height: 100vh (this ensures the body is always at least as tall as the visible screen). After that, you can remove the margin on the article and use Flexbox or CSS Grid to center the card effectively
    • As for the font sizes of h2 and p, there's no strict standard, as it really depends on the design. Since you don't have access to the design files, I recommend checking out some design systems (like Bootstrap, Material Design, etc.) and applying what feels right for your website.

    Hope this helps!

    0
  • creatored•50
    @creatoredPosted about 2 months ago

    You actually did very good ,

    Just like you mentioned the font-size on the p tag is a little bit on the low side , try putting in different values until it fits perfectly in scale with rest of the your design, there really is no way to know the exact font-value to assign to a tag unless otherwise stated.

    But you did good overall.

    0

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