QR code component challenge

Community feedback

• Account deleted

  Hello, aryakrishnaksh2021. Congrats on completing the challenge!

  I have some suggestions that might be helpful to you in the future:

  • Consider using the main tag to represent the main content of your page, which, in this case, is the card.
  • Instead of adding <section class="container"> and <div class="row"> to center your content, you can use these two methods:

  /* Add this to your body selector */
  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* _ _ _ OR _ _ _ */
  
  /* Add this to your main selector */
  .card {
    /* other styles */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  • To ensure that the image stays inside the card, no matter the size, add width: 100% to your .card-img selector.
  • Adding the background property inside your body selector is best.

  Regarding responsiveness, you may find width: min() useful to resize the content depending on the screen size. You can read more about it here => MDN: CSS min()

  I hope you find these suggestions helpful. With that, happy coding!

  0
• 

  P

  merwhite11•20

  @merwhite11Posted 7 months ago

  Great work @aryakrishnaksh2021 !

  I'm impressed you were able to get the font sizes and line breaks to match the model!

  One thing I would recommend is using flex on the card itself (you wouldn't need the row div in this case). That way you won't have to hard code in the widths of the card. The width will be determined by the fixed width of the qr-code image + margins + padding. It will fill the entire screen for small screens.

  Another tool I'm learning and trying to work with now is BEM and nesting with scss to make styling more readable. Maybe something to try for the next project ! -- https://getbem.com/introduction/ https://medium.com/swlh/sass-bem-nesting-variables-970403f42dd6

  0