margin,padding,height and max-width

Community feedback

• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  Hello @jefta-jose!

  Your project looks great!

  I noticed that you used margin to place the card in the middle of the page. Here's a very efficient way to center the card:

  • Apply this to the body (in order to work properly, you can't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  0
• 

  P

  solvman•1,650

  @solvmanPosted 10 months ago

  🚀Great job! 🚀

  I have a few suggestions to improve your code. Do not use all caps for your class names. Also, centering content vertically using hard-set margins makes your design not responsive to height changes. I would change up your container class like so:

  .qr-container {
      background-color: white;
      border-radius: 20px;
      text-align: center;
      padding: 20px 20px 40px 20px;
      max-width: 300px;
      border: 1px solid #ccc;
  }
  

  To center your container, you can use a couple of methods:

  1. Flexbox:

  body {
      margin: 0;
      padding: 0;
      font-family: 'Outfit', sans-serif;
      background-color: rgb(213, 225, 239);
      overflow: hidden;
      height: 100vh;
      
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  2. Grid:

  body {
      margin: 0;
      padding: 0;
      font-family: 'Outfit', sans-serif;
      background-color: rgb(213, 225, 239);
      overflow: hidden;
      height: 100vh;
  
      display: grid;
      place-content: center;
  }
  

  I prefer the last method since it uses one less line of code. 😄

  Congratulations🎉, and keep up the good work! 👍

  0
• 

  Lolito Lindsey•50

  @Lolito-Lindsey-OfficialPosted 10 months ago

  First off, amazing job with the QR code component! Regarding the centering of the QR-container, totally get it! This FreeCodeCamp article was of great help when I was working on the previous challenges. Hopefully it helps for future projects! Best of luck :)

  https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/

  0