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

Tailwind CSS Responsive QR Code

@Kevinw14

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


What are you most proud of, and what would you do differently next time?

I don't think I got it close to the design but I am proud of something that does look visually appealing.

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

Getting the height to width ratio correct. I used what I thought looked best.

Community feedback

P
Max 70

@korniykom

Posted

There is a slight problem with the card ratio. You can find the correct one in the provided Figma file. You used w-80, which corresponds to 320px, which is the correct width, and h-[550px], but in the design, 499px was used (really interesting choice). So I suggest changing the height to h-[499px] or h-[500px]. Overall, the card looks very nice, though after you change the height, you may need to adjust the margins of the text as well.

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