QR Code Solution

Community feedback

• 

  Regina•90

  @regina-chtPosted over 1 year ago

  Hey!! Congratulations on finishing this challenge😊, you did a great job😉. I reviewed your code and here are a couple of suggestions I can give you:

  I noticed that you added padding to your main .Qrcode__container I find that it isn't necessary so you can remove it.

  The challenge states that the card layout doesn't shift, and when you rescale the card in your design, the layout becomes a bit odd. To fix this, in this particular situation, I'll suggest sizing the card in pixels:

  .QRcode__sm--box {
  width: 320px;
  height: 495px;
  }
  

  Since your box shadow is the same color as your background, it doesn't make a visible difference, you can remove it or perhaps change the color so it has a bit more contrast with the background.

  Remember that the padding property includes the four attributes in this order: top, right, bottom, and left. In this situation, the padding-top is overridden by the padding attribute and is not applied correctly, you should only use one property to define your padding.

  img {
  padding-top: 20px;
  padding: 16px;
  }
  

  And to place the image more accurately to the design you can instead try removing the padding from your image and adding a margin top and bottom instead:

  img {
  border-radius: 15px;
  width: 290px;
  max-width: 100%;
  margin: 15px auto;
  }
  

  I changed the width value to adjust the size better and the border-radius.

  With these changes, you won't need the media query for this solution . Remember, this is only because the challenge said that the card layout doesn't shift, but if you chose so, you can improve the responsive version!!!

  😅Finally, an extra suggestion, to have more control over your color pallet, you could use CSS variables for this they are stated at the beginning of your stylesheet like this:

  :root {
  --blue: hsl(179, 62%, 43%);
  --light_gray: hsl(179, 47%, 52%);
  }
  

  And to use them, you declare the variable this way: background-color: var(--light_gray);

  I know it may seem like a lot😩, but hopfully it's helpful. If you have any questions let me know!!!🤔 And keep going, only practice makes perfect. You're doing great!!🥳🥳

  Marked as helpful

  2
• 

  Abiodun•10

  @OyetomiPosted over 1 year ago

  Try making use of padding and margins to make it look better

  1