Submitted over 2 years ago

QR code component with HTML and CSS

Patrick Cuentas Mariano• 260

@PatrickCuentas

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Please do not forget to leave me your feedback by taking a look at the code and if you did not understand something let me know as it is always good to be improving.

Thank you very much ❤

Community feedback

Nícolas Gabriel• 140

@Nick-Gabe

Posted over 2 years ago

Awesome implementation and good semantic, congrats! But I would suggest to define a max-width in the .container, because for some screen sizes below 1024px like 1000px, it stays at 89% of the screen because of the content:

 .container { 
   padding: 1rem 1rem 2.6rem 1rem;
   // max-width: ...
 }
 
 .content { 
   width: 89%; 
   margin: 0 auto; 
 }

Cheers✨

Patrick Cuentas Mariano• 260

@PatrickCuentas

Posted over 2 years ago

@Nick-Gabe Thanks for the info I'll take a look at it 😉

Shantanu Dutta• 30

@nlern

Posted over 2 years ago

Awesome solution with near identical measures and 0 accessibility issues! Well done!!

MH• 10

@MH3Web

Posted over 2 years ago

Nice work. How did you get the correct measures?

Patrick Cuentas Mariano• 260

@PatrickCuentas

Posted over 2 years ago

@MH3Web Checkout the extension PerfectPixel by WellDoneCode (pixel perfect)

MH• 10

@MH3Web

Posted over 2 years ago

@PatrickCuentas Thanks so much.

Please log in to post a comment

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