QR Code component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Axel, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!**

  Your first solution seems great, but I want to give you some tips to improve it even more.

  You can start by giving it the proper alignment, so all you need to do is remove the padding from the body, add display: flex and min-height: 100vh (the child element align to its parent size, in this case the parent size will be all the screen height) the parent is the body and the child the container.

  The card is too much rounded, try to use a value around border-radius: 14px.

  Remember ever, if you want that any element become responsive, never use width, use instead max-width or min-width. This is better because, width: 300px is a element with 300px that cannot be bigger or smaller, a element with max-width: 300px have 300px but can be smaller, this means that if the screens scales down the element will scale down and contract. So you need to add to the card max-width to make it responsive.

  I did some changes to your code to fix this issues, see the changes below:

  body {
      min-height: 100vh;
      background-color: hsl(212, 45%, 89%);
      display: flex;
      /* padding: 50px; */
      justify-content: center;
      align-items: center;
  }
  
  .card {
      background-color: hsl(0, 0%, 100%);
      padding: 20px;
      border-radius: 16px;
      max-width: 350px;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Axel•250

  @AxlMrtPosted over 2 years ago

  I couldn't ask for more, it will help me a lot to improve. Thanks for the lesson and the fast answer !

  0