@Hassiai
Posted
Replace <div class="card"> with the main tag to fix the accessibility issue. click here for more on web-accessibility and semantic html
There is no need for user-scalable=no in the meta tag to make your page responsive , use <meta name="viewport" content="width=device-width, initial-scale=1">
instead <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
There is no need to give the body a width of 100%, to center .card on on the page using flexbox add min-height: 100vh to the body.
To center .card on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Replace the height in .card with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement. padding: 15px
and give the img a max-width of 100% instead of a width.
Give h1 and p the same font-size of 15px,the same margin-left and margin-right values. Give p a margin bottom and top 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
@adam-young5
Posted
@Hassiai Thank you for taking the time to reply. Very helpful and much appreciated.