QR Code Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Dalia, how are you? Welcome to Frontend Mentor and congratulations for you first solution!

  Here is some tips:

  • You dont need to set the card height, the height of the card will come from the padding/margins you'll give to the elements, is for this reason that the QR Code has a bigger margin on top in comparison to the sides.

  • For the box, you can set max-width instead of width, this way you card will stretch when get smaller than 325px, if you set only width the card width will be ever a fixed value and not behave responsive:

  .box { max-width: 325px; max-height: 500px; }

  • Consider that the QR Code is a square so you can set this with max-width or 100% if you want that the image grows 100% of the container:

  #qr-code { max-width: 300px; max- height: 300px; border-radius: 1em; }

  • The box shadow value is box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%); and you can apply it to the container.

  You take a look on my solution, to understand better what I've said about the card construction, maybe I didn't explain it clearly and seeing the code you get it.

  https://www.frontendmentor.io/solutions/qr-code-component-SJkAUS-Iq

  I hope it helps you! Keek it up.

  Marked as helpful

  0

  ---

  

  Dalia Muj•40

  @DaliaMujPosted over 2 years ago

  @correlucas Thank you for your suggestions!

  0
• 

  Gaurab Bhowmick•90

  @Gaurab019Posted over 2 years ago

  Great Job....... I dont see any box shadow on the card......which i think was part of the design. I dont see media query either so need to check on the responsiveness

  Marked as helpful

  0