Skip to content
Submitted about 2 years ago

QR Component Card challenge

Jacob Seymour•50
@Jacwilalasey
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

Thanks for checking me out!

One issue I didn't figure out, how do I get the QR code img to resize with the rest of the card component when sizing down to mobile?

Thanks, Jac

Community feedback

  • ABHAY GAUTAM KAMBLE•340
    @abhay8696Posted about 2 years ago

    Hey @Jacwilalasey, You need only one div in body element. And to keep that div in center of page, use flexbox as shown below: body{ height: 100vh; display: flex; align-items: center; justify-content: center; } This will keep your content in center always. And for the image size issue, keep its max-width to 100%.

    Hope this helps, thank you.

    Marked as helpful
    1
    Jacob Seymour•50
    @JacwilalaseyPosted about 2 years ago

    @abhay8696 Thanks! This worked really well, appreciate the feedback!

    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