Skip to content
Submitted about 1 year ago

QR Code Card Component using HTML/CSS

MeaganA•40
@MeaganA
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

Hello, I completed this QR Code Challenge. I was having difficulty with the mobile version. There was more space at the top of the page that might cause the users to scroll down a little to get to the actual QR code card. Any constructive feedback on this challenge is welcomed!

Community feedback

  • Arturas Mickiewicz•100
    @arturasmckwczPosted about 1 year ago

    looks good!

    Marked as helpful
    0
  • Freedteck•130
    @FreedteckPosted about 1 year ago

    Hi, well-done here. Your code is very clear and clean. From what I observed, you work a lot with margin which can create more space. Try any or all following if it'll help:

    1. Adjust the size of the margin you gave the cards,
    2. Since u used flexbox, work with the gap properties instead of using margin and apply side padding.
    3. Another thing u can try is to apply the flex layout to the body itself and try to set its min height to 100vh, justify content center, align items center.

    While some of these might not work for you, it's still good to try them out

    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