QR Code component challenge

Community feedback

• 

  talisong-cardoso•100

  @talisong-cardosoPosted over 2 years ago

  change:

  <meta name="overview" content="width=device-width" initial="" scale="1.0">
  

  to

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  

  and, you can centralize the ".box" with flexbox, exemplo:

  body {
      background-color: lightblue;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
  

  the width property in 'body' is not needed, as this small element is centered and will not 'exit' the viewport.

  sorry if there are any english mistakes. I'm from Brazil

  Marked as helpful

  1

  ---

  

  Olabisi G. Adekoya•70

  @labisigloriaPosted over 2 years ago

  @talisong-cardoso Thank you, I appreciate this.

  0
• 

  Des2Dev•70

  @Des2DevPosted over 2 years ago

  Hi ! you did good, but there are some small changes you can do to make it more good.

  • you don't need media query @media in this challenge. Remove the media query.

  • And also use flexbox to center the card, and remove the margin properties from body.

  • And always try to use min-height property, not height.

  I thin this comment will helpful. and Good luck to your upcoming challenges.

  Marked as helpful

  0

  ---

  

  Olabisi G. Adekoya•70

  @labisigloriaPosted over 2 years ago

  @Des2Dev Thank you, very helpful.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Olabisi, congratulations for your solution!

  I've checked your code and I find an issue, when your card is scaling down, there's a big margin around the component that doesn't let it scale properly.

  See the fixes below:

  .box {
      background-color: hsl(0, 0%, 100%);
      width: 280px;
      /* height: 440px; */
      /* margin: auto; */
      border-radius: 15px;
  }
  

  Hope it helps, happy coding!

  0