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

@sashauly

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


It's hard to do without a Figma project. But anyway, it was very interesting!

Community feedback

@mikej321

Posted

Hello there, Aleksandr and congrats on finishing your first project!

A few pointers that can help this more closely to the finished design...if you add a 'padding-inline' of 1rem to the .wrapper-desc as well as adding around 1.3rem of line-height to it, you can make the final paragraph closer to the design.

Furthermore, changing the h2 tag's 1.25 rem to maybe 1.4rem would match the design a little better.

Finally, I would remove all of the position elements and transforms that are located on your wrapper and instead, plug this into the body tag. set the min-height of it to 100vh, this will make the body a full height so you are able to position correctly. Next, apply these styles to the body tag as well 'display: flex;' 'flex-direction: column;' 'align-items: center;' 'justify-content: center;' 'gap: 1rem;'

More info on flexbox is located within this link

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I wish you luck on your studies, you did great!

Michael

Marked as helpful

0

@sashauly

Posted

@mikej321 , thanks for your help!

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