@Hassiai
Posted
Replace <section class="qr-code-component"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html.
There is no need to give .qr-code-component and change the value of the min-height to 100vh.
There is no need to style .qr-code. Give the img a max-width of 100% and a border-radius value, the rest are not needed.
There is no need to give .card a padding-bottom value.
Give .description a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.
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
@joekotvas
Posted
@Hassiai Thank you for taking the time to review my solution! I appreciate the tips for refactoring my code.
I've implemented most of your suggestions. I would differ on the use of em for margin, padding and width because I don't want the overall width of the component to increase with the font size; I've tested with various font size settings and I think it works well with absolute units for those settings.
You have been very helpful; thank you!
Joseph Kotvas
