Skip to content
Submitted 3 months ago

I use VS code editor to code it.

Sachinkush0406•50
@Sachinkush0406
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 just started the Front-end Crouse and i take this challenge and to test my beginners skill in this and I done it pretty well.

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

When i started this challenge I just encountered a single problem with the QR code box , it was not going in the center of the web page and then i watch some video and google it then i understand and make it done.

Community feedback

  • M-Faraz-Anjum•140
    @faraz-ch1Posted 3 months ago

    It's easy, give box a width, then on the parent give margin left and right auto. It will make it in center and will also be responsive automatically.

    Marked as helpful
    0
    Sachinkush0406•50
    @Sachinkush0406Posted 3 months ago

    Ok i wil remember it for in future projects @faraz-ch1

    0
  • MikDra1•6,920
    @MikDra1Posted 3 months ago

    Really nicely done component @Sachinkush0406 😀,

    Here are some changes that you could make to the code:

    • To center things you can use this two properties on the container that has 100vh height
    display: grid;
place-items: center;
    • Never set a fixed height on the element as you did on the card. Instead set a min-height so when the content overflows we will still see it

    If this comment was useful please mark it as helpful 💗

    Good job and keep going 😁😊😉

    Marked as helpful
    0
    Sachinkush0406•50
    @Sachinkush0406Posted 3 months ago

    Thx for the telling about my problem and i will remember in future projects and try that also and tru to not repeat my mistakes. @MikDra1

    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