@Hassiai
Posted
Replace <article class="card"> with the main tag and <h4> with <h> to fix the accessibility issue. click here for more on web-accessibility and semantic html
Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.
To center .card on the page using grid add min-height: 100vh to the body and there is no need for the padding value in the body.
USING GRID:
body{
min-height: 100vh;
display: grid;
place-items: center;
}
Give the img a max-width of 100% for a responsive image.
There is no need for margin-inline in .card_content. Give .card_content 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.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
@ZascuOfficial
Posted
First of all, thank you for responding and for the feedback!
Second of all, I already used display grid and place items center on the body, but when I got to the smaller screen sizes, the card was touching the edges so I added some padding. I could have used a width and give it a percentage value.
Also, I was not aware that every html needs a h1 tag. Thank you for bringing my attention to it! I will try to remember that moving forward with my projects.
Lastly, I didn't use main on the card itself because I thought of it as a simple article element in a larger website, which could have been in a main element. (Oh, and I also gave the img element a max width of 100% but in a separate file called reset.css haha)
Again, thanks a lot for taking time out of your day to give me feedback on my solution. Have a great day!
