@Hassiai
Posted
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
@frank1003A
Posted
@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
@Hassiai
Posted
@frank1003A give both p and h1 the same margin-left and margin-right values.
