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

used flexbox to manage elements

i_d_s_l 270

@ilvdrskn

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


The layout itself is simple. I used flex properties to center the card, and for the exact location of the elements.

Community feedback

Account Deleted

  1. There's lots of empty space below your text. Shorten your design.
  2. Increment the font-size and font-weight of your h1 and p element. Add some padding on top and bottom of the elements.
  3. The border radius in the design is more than what you have set. Make these changes that would get you closer to the desired output.

Marked as helpful

1

i_d_s_l 270

@ilvdrskn

Posted

@theghostuchiha Hello! thank you for leaving your comment under my work! About the font: this is my scourge that I am fighting. Most likely, the fact is that I use fixed values in pixels, when it would be more practical to use em and rem, probably. I also tried to set the size as a percentage, but it looks like a crutch

0

@FelipinDR

Posted

Try using a responsive unit such as rem or em for the main container to add responsiveness to your site

Marked as helpful

1

i_d_s_l 270

@ilvdrskn

Posted

@FelipinDR hi! Thank you for leaving a comment under my work! I will definitely try your advice

1

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