@romila2003
Posted
Hi @nerila1310,
Congratulations 🎉 for completing this challenge, the summary card component looks great you used the flex
property correctly however there are some issues I want to address:
- It is best practice to wrap the main content within the
main
tag which would ensure that your content is wrapped within the correct landmarks e.g.<main class="container"></main>
- You should also wrap the footer within the
footer
tag and nest this within the body outside of themain
tag e.g.<footer class="attribution"></footer>
- I would suggest you use the
flex
property on the body since you have a footer, and it will align it vertically with theflex-direction
property. - Instead of using media queries within this project, I would suggest you to use the
max-width
property so that the width of the card won't increase after a certain width e.g.
.container {
margin: 0 20px;
}
.center {
max-width: 400px;
width: 100%;
}
I added the margin
property to prevent the card from touching the side of the screen.
Overall, great attempt and wish you the best for your future projects so keep coding 👍.
Marked as helpful