QR code component (My first challenge)

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

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

  I saw that you've used margins to give the container its alignment, this works but is really tricky to control all the content.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.

  Here's the changes in the body to make it align:

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

  👋 I hope this helps you and happy coding!

  1
• 

  Mehdi•990

  @siavhnzPosted about 2 years ago

  Hello Jesús Yadiel, Congratulations on your first challenge completion.

  You have done great work, and I'm happy for you. I saw your solution, and I have some tips to improve your work accordingly:

  • In your index.html file, you can grab font-weight from google fonts with this query string ?family?=Outfit:400,700 and use it in p and h1 CSS selector

  h1 {
   font-weight: 700;
   ...
  }
  p {
    font-weight: 400;
   ...
  }
  

  • If h1 and p have padding surrounding all the edges not only on top for h1 and bottom for p they look better

  h1{
   padding: 1rem;
   padding-bottom: 0.5rem;
  }
  p {
   padding: 1rem;
   padding-top: 0.5rem;
  }
  

  I hope this is helpful. Happy coding

  1