QR code page in HTML and CSS

Community feedback

• 

  Hassia Issah•50,670

  @HassiaiPosted almost 2 years ago

  Replace <div id="all"> with the main tag, <h4> with <h1> and add the alt attribute alt=" " to the img tag to fix the error and accessibility issue. The value of the alt is the description of the image. click here for more on web-accessibility and semantic html

  There is no need for <div id="blue">, <div id="h4"> and <div id="p"> in the html and their styling in the CSS.

  The body has a wrong background-color.

  Give the styling you gave to #all to the main with exception of the width and height value. There is no need to style the main/#all. To center .white on the page using flexbox, add min-height: 100vh to the body.

  To center #white on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  Give #white a fixed width value and replace the height width a padding value for all the sides. #white{ width: 320px/ 20rem; padding: 1em} . Give the img a max-width of 100% instead of a width and height value.

  Give .text a margin value for all the sides instead a width and height value and gap value to .text for the space between the text. Give h1 and p the same font-size value of 0.9375rem which is 15px. There is no ned to give h1 and p a width value.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1