Design comparison
Solution retrospective
I would appreciate any observations if any
Community feedback
- @ErayBarslanPosted over 2 years ago
Hey there, your solution is pretty close to design excellent work! Some suggestions to improve the project:
- To center the card correctly you simply need to change
align-content
toalign-items: center
on your.body
element. In this case you won't needmargin: 150px 0;
on your container. - Also for best practice try to get use to not giving
height
to container elements. You can simply removeheight: 380px
and it won't change the result. It's more convenient to always let the children define it's parent height by using margin, padding etc. Won't matter much for a static card, but once you start working on bigger & dynamic projects, setting height might cause overflowing issues. - You can remove
left: 122px
from img. If you wish perfectly center anabsolute
element horizontally, you can do so as:
img { ... left: 50%; transform: translateX(-50%); }
- Using a level one heading per page will result in better SEO. For this challenge instead of
<bold>
you can use<h1>
for name. The card is about Victor Crest so we can use <h1> there. Other than these nice work again! Happy coding :)
Marked as helpful0 - To center the card correctly you simply need to change
- @correlucasPosted over 2 years ago
Hello again Glow! Congratulations for your new solution!
I saw you solution live preview and the code in the repository and I've some tips for you/
The card is not responsive yet because you've used
width: 330px
in the container that's a fixed property, replace it withmax-width
to allow the container to contract when the screen scales down. Remember that for flex elements you don't need to declare the height, the container grows with the content side automatically.Hope it helps, happy coding 👋
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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