QR Code scanner using Flexbox

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace<div class="card">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  To center .card on the page using flexbox, replace the height in the body with min-height:100vh.

  There is no need to give .card a height value and style. barcode. Give the img a max-width of 100% instead of a width and height value. Give p and h1 a font-size of 15px the same margin-left and margin-right values, the same margin-top value and give p a margin-bottom value.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Frank Ezene•350

  @frank1003APosted almost 2 years ago

  @Hassiai Thank you for the tips and links: I have updated all. I took out the h1 tag and used a p tag everywhere, but the first p tag doesn't align as intended so I increased the font-size. Any idea on how to correct this without increasing the font-size

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @frank1003A give both p and h1 the same margin-left and margin-right values.

  1