Skip to content
Submitted 9 months ago

Flexbox QR Code - Newbie Challenge

roguemacaroon•40
@roguemacaroon
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 am proud of the responsiveness of my design.

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

I did not have incredible difficulties, but just getting used to the frontendmentor platform was a challenge in itself.

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

I do not need any help now, I received feedback from a mentor when I first submitted. I am now just going through the learning path and it is asking me to fill these out again.

Community feedback

  • Venus•1,640
    @VenusYPosted 9 months ago

    Good work on this challenge, this is a very impressive first project! You've done well on the responsiveness of the site and replicating the design.

    One thing I would point out, however, is that by setting the height to 100vh, you've made it so that the card gets partially cut off when the viewport height is not large enough to fit the entire card.

    You could fix this by simply changing height: 100vh to min-height: 100vh on the .qr-section element.

    .qr-section {
  height: 100vh; ❌
  min-height: 100vh;
}

    This sets the height of this element to 100vh initially, but still allows it to grow if necessary in order to fit the content of the page.

    Other than that, well done once again on completing this challenge!

    I hope this helps! :)

    Marked as helpful
    1
    roguemacaroon•40
    @roguemacaroonPosted 9 months ago

    @VenusY

    Thank you kindly for your feedback, it is very appreciated! :) I am going to go update my code right now to solve that issue.

    1

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