Frontend Mentor QR Challenge

Community feedback

• 

  Marko•80

  @smarko-webPosted almost 2 years ago

  to start, congratulations to your project

  Some improvements:

  • add html landmarks (main and footer)
  • move the attribution into footer
  • add min-heightto body in css insure that everything is contained within the body
  • In my opinion the QR code did not to be in a div

  In all Good Work and stay motivated

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center .white-box on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. Instead giving .white-box position: absolute; and its properties and giving it a margin value.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

  For a responsive content give .white-box a fixed max-width value instead of a fixed width value. Give the img a max-width of 100% instead of a fixed width value.

  Give the border-radius a fixed value instead of a percentage value e.g border-radius: 16px; Give the h1 and p the same padding-left and padding-right value and give h1 a margin-top and margin-bottom value or give h1 and p the same margin-top values. e.g.:

  h1,p{ padding: 0 16px;  margin-top: 16px} 
   or 
  h1,p{ padding-right:16px; padding-left:16px;} 
  h1{margin-top: 16px; margin-bottom: 16px}
  
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0