QR Code Component using CSS Custom Properties

Community feedback

• 

  P

  Rupali•780

  @rupali317Posted 8 months ago

  Hello @lindajensen

  Great work on your first challenge. Kudos for not giving up!

  For question 1, I recommend the following changes:

  The QR image should not have a fixed width of 300px as it can cause issues on how the padding is displayed. It is better to use percentage since it indicates how much percentage of the parent's width the child element will occupy. I recommend doing the following in your CSS for your img element:

  img {
      max-width: 100%;
      border-radius: 10%;
  }
  

  After that in your card class, you can have the padding as 20px. This means that 20px is applied uniformly on top, right, bottom and left of the card.

  .card {
      background-color: var(--white);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      border-radius: 20px;
      margin: 0 auto;
      max-width: 300px;
  }
  

  Let me know if this helps

  My 2 cents, avoid using pixels. A better unit is rem since pixels are fixed and cannot scale well. rem is better for scaling and it enhances your accessibility.

  For your question 2, media-queries are not needed

  Great job! Keep coding!

  Marked as helpful

  0

  ---

  

  Linda Jensen•80

  @lindajensenPosted 8 months ago

  Thanks! This helped quite a bit. I changed the border-radius as well and the result is a lot better. @rupali317

  1
• 

  Kallyne Layane•70

  @jsklcodesPosted 8 months ago

  🙋‍♀️ Hi Linda! Based on your code and your problems with this challenge, I have a few suggestions for you:

  1. The padding of the card should be the same at the top and sides, which will leave the frame around the image. It should be slightly larger at the bottom. The padding property is an abbreviation, you can define each of these spacings with a single padding property. So: padding: top right bottom left;. That's enough to solve your problem, but if you want to understand more about it, I suggest you read about how it works and the syntax of paddings in MDN.
  2. It's not necessary to use media queries in this challenge; there are ways to make the width of an element responsive without using them, which is the case here. I recommend you take a look at width and max-width, which can be used together to do this.

  ✨ You can make some small improvements:

  • The title of the card should be a bit bigger, 22px.
  • I recommend you remove the attribution from your solution, as this will affect the alignment and comparison with the design. Leave an attribution in the README of the project.
  • There are some spacing differences compared to the design; resolving them will bring your solution closer. Did you consult the design in Figma or Sketch?
  • In the design, the card dimensions are 320x497, but you don't need to set fixed sizes to get this result. As you add the necessary spacing, it will be adjusted. Remember that the width can be obtained with what I said above (point 2).

  📌 An extra tip: Try to use relative measurements, such as rem and em, rather than fixed ones, such as px. This will ensure a much more responsive solution and avoid some problems.

  I'll also leave you with a great recommendation, which will help with basically everything I've talked about. Kevin Powell's Conquering Responsive Layouts free course, which focuses on responsiveness, how to use the right measures, how the browser handles it all. He breaks it down into 21 days, enough to be able to create responsive interfaces and understand how it works, bringing practical challenges to the concepts. It also covers media queries and Flexbox, as well as suggesting extra resources on the concepts.

  If you need any more help, just let me know. Have a good learning!

  Marked as helpful

  0

  ---

  

  Linda Jensen•80

  @lindajensenPosted 8 months ago

  Thank you so much! This helped a lot! @jsklcodes

  1