QRcode

Community feedback

• 

  Jonatas Martins•100

  @jonatasolmartinsPosted over 1 year ago

  Congratulation for complete this challenge!

  I have a few tips for you.

  First, reset your elements by removing all margins and paddings from them. Also, tell Css to include the borders and paddings when setting the width of your elements by using box-sizing equal to border-box. I usually do like this:

  *,
  *:before,
  *:after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  

  This will prevent any element to have a default margin and padding which difficulties a lot of our job when styling it.

  You don't need to use height on your elements, just use the content size and the spaces between them to get the height you intend. So it's better to remove all height properties of the elements with the exception of the min-height: 100vh of the body.

  If you use a padding-bottom: 1.5rem; on .body2, for example, the element will expand from the bottom giving your div a bigger height.

  .body2 {
      padding-inline: 1.5rem;
      padding-bottom: 1.5rem;
      text-align: center;
  }
  

  Prefer to use rem instead of px, Rem is relative to the root element (HTML) generally it's 16px so 1rem is equivalent to 16px, for example, 300 / 16 = 18.75rem.

  You can set the img element to have a width of 100% so it will use all available space in the div, then set the padding in your .body1 class to add a space in the edges.

  The problem with the border-radius containing the QRcode was caused by the image padding-top, it was clipping the image. Move the padding to the .body1 class and this will solve the problem.

  .body1 {
   padding: 0.5rem;
   padding-top: 0.75rem;
  }
  
  img {
      width: 100%;
      border-radius: 1rem;
      /* height: 80%; */
      /* padding-left: 15px; */
      /* padding-top: 10px;
  }
  

  0