@Hassiai
Posted
Replace<div class="qr-box">with the main tag to make the page accessible. click here for more on web-accessibility and semantic html
<div class="attribution"> should be out of <div class="qr-box"> and wrap in a footer tag.There is no need to give the body a height and position: relative.
For a responsive content, replace the width in .qr-box and the img with max-width
.
To center a content on a page using flexbox or grid:
- USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
- USING GRID: add min-height:100vh; display: grid place-items: center to the body
body{
min-height: 100vh;
display: grid;
place-items: center;
}
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 and here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
@nazimulhossain
Posted
@Hassiai , Thank you for your valuable feedback, I will make some changes as per your advice.