
Solution retrospective
how to center the card? any other feedback?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Wandole
Hey,
As you asked for the card position, I looked into your CSS to know how you did it. The method you used is good, but it's really not the best (I mean, there is easier!).
- for horizontal centering => if your card have a width/max-width, you can simply add an auto margin on right and left. It's easy and short:
.card { max-width: 15rem; margin-inline: auto; // It's a shorthand for margin-left and margin-right }
- sadely, I think that you can't use the same method for vertical alignment. For that, you can use felxbox (and it works for horizontal alignment too):
.card-container{ display: flex; justify-content: center; // horizontal alignment align-items: center; // vertical alignment }
For both methods, the card will be centered into its container. So be sure that this container take all the screen (if you take the body as the container, it's already good but if you want to use the main tag, you will have to adapt it to take all the screen).
The 'position: absolute' property can be usefull in HTML/CSS but it's better to use it only when you don't have other choices because it can lead to problem with responsivness.
I looked your HTML too to check the semantic and you've made a good job, I think. There are maybe some details to change but I'm not even sure.
I hope i will be usefull :-)
Have a good day!
- @Nadine-Green
HEY KODSI!
I believe the container is already perfectly aligned, according to the screenshot, however, I would like to draw your eye to something else, you have quite a number of accessibility issues all addressing the same problem, a quick fix for this would be to allocate an empty
alt
attribute to all of them and also place the codearia-hidden="true"
as an attribute as well, what this code does is tell the screen readers to not acknowledge the image as it serves no purpose and is simply decorative.IF THIS WAS HELPFUL IN ANY WAY, DON'T HESITATE TO MARK IT AS HELPFUL :)
HAPPY CODING!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord