QR code component

Community feedback

• 

  Cheosphere•1,040

  @CheospherePosted about 2 years ago

  @coder-megha242 Hi Megha, here are some tips to make your project look better:

  First I recommend you set both html and body, a width and height of 100%, so that later with display flex you can center your content horizontally and vertically:

  html,
  body {
      width: 100%;
      height: 100%;
  }
  

  Regarding the "*" element, I recommend setting the margin, padding, and box-sizing properties, and setting the font-family property on the body, along with display-flex, justify-content, and align-items:

  *{
      margin: 0%;
      padding: 0%;
      box-sizing: border-box;
  }
  
  body{
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Outfit', sans-serif;
      background-color: hsl(212, 45%, 89%);
  }
  

  The element with class ".content" does not need properties, since its parent element (body) will take care of centering your content:

  /* .content{
      height: 100%;
      width: 100%;   
      display: flex;
      justify-content: center;
      align-items: center;
  } */
  

  The element with class ".box" is the container of the qr code image and texts, this element has a width of 320px and a height of 520px, and the padding of 10px is set on this parent element, so you won't have to apply padding to the child elements, additionally I recommend you to set the following properties in ".box", ".box h2" and ".box p":

  .box{
      width: 320px;
      height: 520px;
      background: hsl(0, 0%, 100%); 
      border-radius:  10px;
      padding: 16px;
  }
  
   .box h2{
      /* padding: 10x; */
      margin-top: 16px;
      margin-bottom: 24px;
      font-size: 24px;
      text-align: center;
   }
  
   .box p{
      margin-top: 5px;
      padding: 10px;
      text-align: center;
      font-size: 15px;
   }
  

  Finally, to the ".box img" element you only assign a width of 100% and the height will adjust automatically, and I recommend setting the border-radius property to the same value as its container (10px):

  .box img{
      width: 100%;
      border-radius: 10px;
  }
  

  I hope these tips are useful, a hug!

  4

  ---

  

  Megha Bhutada•10

  @coder-megha242Posted about 2 years ago

  @Cheosphere Thank you so much this is helpful for my coding. I was confused about how to do that. I appreciate that detailed explanation about code. Thank you so much @Cheosphere

  2