@correlucas
Posted
👾Hi Adriel Murray, congrats on completing this challenge!
You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code to improve the html markup/semantic:
1.You made your html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each card you use <article> instead of the <div>.
2.The approach you've used to center this card vertically is not the best way, because using margins you don't have much control over the component when it scales. My suggestion is that you do this alignment with flexbox using the body as a reference for the container.
The first thing you need to do is to remove the margins used to align it, then apply min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body with display: flex and align-items: center / justify-items: center.
REMOVE IT:
.whole-container {
/* min-height: 100vh; */
/* margin-top: 130px; */
}
USE THAT:
body {
MIN-HEIGHT: 100VH;
background-color: hsl(204, 43%, 93%);
font-family: 'Karla', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
✌️ I hope this helps you and happy coding!
Marked as helpful
@correlucas each card should not be an article, divs are fine to use. The whole component could be an article but not the sections within it.
Articles are for encapsulated content that could be syndicated - lifted and shifted on their own to another page or even another website.
However this is all one piece of related content. The headings required in the challenge would give all the semantic structure needed (along with choosing the correct elements for other written content)
