Componente de QR CODE

Community feedback

• 

  Alberto Ledesma•370

  @ledesmxPosted about 1 year ago

  Hi Christian Ribeiro 👋

  Great job on your solution!

  Here are some recommendations for you:

  • I suggest using Flex or Grid to center the card. Check out the MDN Web Docs to see how it works: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

  body {
    display: flex; /*Here you set this element as a Flex Container*/
    align-items: center; /*This center the content inside itself vertically*/
    justify-content: center; /*This center the content inside itself horizontally*/
    min-height: 100vh; /*This sets the body's minimum height as 100% of the viewport's height*/
  }
  /*Now the card's margin is no longer required*/
  .card {
    margin: auto; /*Remove this*/
  }
  

  • It is a good practice to remove all the added margin automatically. Use the * selector to select everything and remove the margin with margin: 0;. This gives you more control over whether or not you want add margin on each element separately.
  • It is also good practice to use percentage units (%) instead of viewport units (vh and vw). Only use vh and vw if you don't have other option.
  • By default the <div> element is a block element. It is no required to specify display: block; in the .card. I woud remove it as well.
  • Lastly, when you want to give to an element the width based on the width of something else (in this case de screen's width) it is a good approach to use the width property along with either max-width and min-width properties. See the following example:

  .card {
    width: 80%; /*This sets the card's width to 80% of the screen's width*/
    max-width: 350px; /*This will prevent the card from stretching out more than 350px*/
  }
  

  In summary I would add this code:

  * {
      margin: 0;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  .card {
    width: 80%;
    max-width: 350px;
    padding: 13px;
  }
  img {
    width: 100%;
  }
  

  And remove this:

  .card {
    display: block;
    margin: auto;
    width: 30vw;
    height: 70vh;
  }
  img {
    width: 28vw;
    margin: 13px;
  }
  

  I hope this helps a little.

  Well done for the rest.

  Marked as helpful

  0
• 

  Christian Ribeiro•70

  @christianribeirooPosted about 1 year ago

  Thank you for your support and for taking the time to explain it to me, it helped a lot, I'll even write it down in my diary!

  1