QR Code | HTML - CSS

Community feedback

• 

  maym42•380

  @maym42

  Posted over 2 years ago

  Hi Yuri,

  You did a good gob 🙂

  But I have some tips for you:

  In order to center the card in the screen. add to the body this css code.

  body{ background-color: var(--cor2); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; font-size: 15px; }

  And remove the margin ,height and the width form .prin{} so class .prin look like this:

  .prin { background-color: white; background-repeat: no-repeat; text-align: center; border-radius: 25px; }

  In addition it a good practice to use em units instead of px. In the body you have to define one time text-size in px ,and after that all the other things you defined with relative units like em.

  Hope I helped 😅

  00

  Marked as helpful
• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  Hi @yuuricrz 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

  Here are some suggestions you might consider:

  The container is not in the center. if you want to center there are two modern CSS techniques to center elements:

  Using flexbox layout:

  body {
     margin: 0;
     width: 100%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
  }
  

  Using grid layout:

  body {
     margin: 0;
     width: 100%;
     min-height: 100vh;
     display: grid;
     place-content: center;
  }
  

  And remove margin: 250px auto; in the .prin selector

  More information:

  • The Complete Guide to Centering in CSS
  • A Complete Guide to Flexbox (CSS-Tricks)
  • How TO - Center Elements Vertically (W3Schools) |
  • CSS Layout - Horizontal & Vertical Align (W3Schools)

  Tips:

  • Use max-width: 400px to main element instead of width.
  • Use min-height: 640px to main element instead of height, these properties will keep the dimensions of the component, but they can be adapted to mobile devices.

  Update the image to make it a bit responsive:

  .qr {
      max-width: 360px;
      width: 100%;
      object-fit: contain;
      margin: 25px 20px 25px;
      border-radius: 25px;
  }
  

  I hope those tips will help you.

  Good Job and happy coding !

  00

  Marked as helpful