Responsive QR Component with CSS

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  If you want to make your card responsive with ease you can use this technique:

  .card {
  width: 90%;
  max-width: 37.5rem;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  0

  ---

  

  BarbarossaNext•20

  @BarbarossaNextPosted 2 months ago

  @MikDra1 Thanks for the great tips 💗 There is something else I'd like to ask about I read that I should use relative units such as em and rem, instead of px. However, Figma has no notion for these relative units. Should I do the conversion calculations from px to em and rem manually? What are the best practices to do that?

  0

  

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  @BarbarossaNext As you start you can use a converter but after some time you will realise that you will do it without much thinking

  Marked as helpful

  0
• 

  Wagner Moschini•30

  @wagnermoschiniPosted 2 months ago

  This solution is a bit different visually

  The card must be 320px width and 499px height, and in your solution was 320px width and 533px height. It's because you put an extra space between image and content that not was as the figma spec that was the space-300 property from design system file.

  Also the title right color is slate-900 (#1f314f) and the text is slate-500 (#68778d)

  Marked as helpful

  0

  ---

  

  BarbarossaNext•20

  @BarbarossaNextPosted 2 months ago

  @wagnermoschini Really appreciate your helpful review. I updated the project accordingly and still have a couple of questions:

  1. The overall card height is now 499.78 px instead of sharp 499 px (as in the Figma design file). It turned out that the title text is the element with this additional 0.78 px. I could not recognize the source of this error although I tried my best copying all font-related properties as in the design file.

  2. The comparison between the design and my solution still shows a significant difference in height although Dev Tools show only 0.78 px difference.

  3. I read that I should use relative units such as em and rem, instead of px. However, Figma has no notion for these relative units. Should I do the conversion calculations from px to em and rem manually? What are the best practices to do that?

  0

  

  Wagner Moschini•30

  @wagnermoschiniPosted about 2 months ago

  @BarbarossaNext

  For this challenge specifically, maybe we don't need the card height flexible according to the content, so it's not a problem if you put height:499px in your .card class IMO.

  EM and REM are proportional units and both needs a parent size reference, the diference between them is that EM looks to the direct parent font-size reference and REM looks to the root font-size reference that is the font-size value of the html element. This approach can simplify layout scale between responsive breakpoints at more complex situations than that. IMO I don't think this approach can do a relevant improvement for this challenge maybe for some next more complex challenges in the future that will challenge you to do huge changes in layout/font scale between devices.

  Marked as helpful

  0