qr-code component

Community feedback

• 

  romila•3,550

  @romila2003

  Posted almost 3 years ago

  Hi John,

  Congratulations for 🎉 for completing your first challenge, the card looks great. It is great that you used the right semantics. There are some issues I want to address:

  1. I would suggest you change the margin property since the card becomes too narrow in mobile screen. Instead, I would recommend you to change it to margin: 0 10px as it will not give your top and margin, a margin and will only give the side of the screen and card, a margin of 10px on both sides. This will prevent the card from touching the side of the screen.
  2. The reason why your card is not centering in the middle of the screen, is because, the main tag has a height of 75h. It will center in the middle, if it has the value of 100vh. However, when you do that, it will cause the footer to be screen, where there will be an overflow and you would have to scroll just to see the footer. Therefore, I would recommend you giving your body the flex property, to center everything e.g.

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    flex-direction: column;
    overflow: hidden;
  }
  

  Overall, great attempt and wish you the best for your future projects so keep coding 👍.

  10

  Marked as helpful
• 

  John Areola•70

  @Jonnie-Dev

  Posted almost 3 years ago

  Thanks for your suggestions, all taken and applied

  00