Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Component Card challenge

@Jacwilalasey

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@abhay8696

Posted

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

@Jacwilalasey

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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