QR code component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Paulo, congratulations for your new solution!

  Your solution is already done, now you need to fix its alignment:

  I saw that you've used margins to give the container its alignment, this works but is really tricky to control all the content. My advice for your is to use flexbox to create this alignment. For example, first of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  body {
      background-color: hsl(212, 45%, 89%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  First of all give the correct size for the container with max-width: 320px and remove the margins.

  @media screen and (min-width: 601px)
  .card {
      max-width: 320px;
      text-align: center;
      background-color: hsl(0, 0%, 100%);
      /* margin: 5% 40% 5%; */
      border-radius: 15px;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Paul Costin•150

  @RooneyfullPosted over 2 years ago

  Thank you so much Lucas for showing support. I`ll get that fixed ASAP. Hope to see more comments like this on my future solutions. (Or not xD). Btw why did you say max-width: 320px ? How did get this value?

  0