Skip to content
Submitted over 2 years ago

QR Code Component

Anthony Becarne•160
@Abecarne
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?

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
    @Carson3377Posted over 2 years ago

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

    Marked as helpful
    0
  • p4w3l•30
    @DireAunAmiPosted over 2 years ago

    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

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