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
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

@gabrielcasag

Posted

the layout is almost perfect, with the exception that the spacing below the descriptive text became larger than necessary when adding the card padding (16px) with the paragraph margin-bottom (40px).

Regarding the code, there is room for some improvements, such as using the sr_only class when you want to hide an element on the screen. and also the code mixes px with rem in the spacing, the ideal would be to use just one unit of measurement

Marked as helpful

0

@edwincaipa

Posted

@gabrielcasag If you look at the design at the top right and left, it has 16 px = 1 rem and bottom 40px = 2.5 rem, which is why I place those units.

0

@gabrielcasag

Posted

@edwincaipa you are right! just saying that when u put the 2.5rem the layout gets different, because u already have a padding of 1rem so u actually have 3.5rem from bottom, instead of 2.5 (40px), thats why we seeing your card a little taller than the design in "Design comparison"

keep up the good work 🙌

0

@edwincaipa

Posted

@gabrielcasag In this case, what is the best thing you suggest I do? I already understood your explanation.?

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