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 Code (Bootstrap)

@Patriciagracia

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Kimo Spark 2,190

@kimodev1990

Posted

  • To center your design, Just use in body { min-height : 100vh , display: flex, justify-content: center, align-items: center }
  • It's better in the future to avoid giving your design sizes definite values like your div with class = "card my-3", It's better to give percentage values to make your design flexible, growing and shrinking with viewport dimensions.
  • For better responsive design, you'd better check on clamp ( ) method ( font-size, width, etc ... ) ,so your design sizes will change according to the viewport dimensions and will be suitable for any device layout.

Other than that, Nice work & keep Going on.

Marked as helpful

0

@Patriciagracia

Posted

Hello @kimodev1990 ! Thank you so much for your feedback, it is very helpful. I'm not familiar with clamp(), so I'll definitely look into it.

0
Kimo Spark 2,190

@kimodev1990

Posted

@Patriciagracia You're always welcome, Any time....

0

@Codacad

Posted

good design. Please position the card vertically center 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