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

@Abecarne

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?

Nothing specific, it was one of the first time I tried to really polish a component. And i think the result is good enough.

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

At first, i didn't style the body, so i had problem to center the component in the middle of the screen. I also struggled to set correct margin / padding for the text container.

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

How would you guys do to set appropriate margins / paddings with a figma model ? Are you setting the size by hand or you just try multiple times to find a good looking one ?

Community feedback

Carson'L 100

@Carson3377

Posted

Hi @Abecarne, you can also use overflow-y or overflow: hidden; in CSS for the body section.

Marked as helpful

0
p4w3l 30

@DireAunAmi

Posted

Hi, just delete from body height property or use percent value. And the scrollbar won't show up. To correct space use margin or padding properties.

Marked as helpful

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