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 Code Component

@niiquash

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'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 1,360

@huyphan2210

Posted

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

@creatored

Posted

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
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