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

A Simple QR Code Component Design

Yonten 340

@yozidst

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


A short and enjoyable little challenge!

Community feedback

@DigitaleWeltLibrary

Posted

Hey, good soulution.

If you use min you can pass multiple values and the smaller one is always taken. The unit dvw is dynamic and indicates the width of the browser. So it's 90dvw from the screen. If this is larger than 310px, the px will be taken. Alternatively, you could give the card a margin on the mobile version.

.main-card {
    width: min(310px,90dvw);
}

Happy Coding 😉

Marked as helpful

0

Yonten 340

@yozidst

Posted

@DigitaleWeltLibrary Thanks for the tip! I'll apply it to coming challenges.

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