Skip to content
Submitted almost 3 years ago

QR code component with HTML and CSS

Patrick Cuentas Mariano•260
@PatrickCuentas
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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-GabePosted almost 3 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​:​ ​1​rem​ ​1​rem​ ​2.6​rem​ ​1​rem​;
   // max-width: ...
 ​}
 
 ​.​content​ { 
 ​  ​width​:​ ​89​%​; 
 ​  ​margin​:​ ​0​ auto; 
 ​}

    Cheers✨

    1
    Patrick Cuentas Mariano•260
    @PatrickCuentasPosted almost 3 years ago

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

    0
  • Shantanu Dutta•30
    @nlernPosted over 2 years ago

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

    0
  • MH•10
    @MH3WebPosted over 2 years ago

    Nice work. How did you get the correct measures?

    0
    Patrick Cuentas Mariano•260
    @PatrickCuentasPosted over 2 years ago

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

    0
    MH•10
    @MH3WebPosted over 2 years ago

    @PatrickCuentas Thanks so much.

    0

Please log in to post a comment

Log in with GitHub

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