Design comparison
Solution retrospective
I feel proud to be able to make a beautiful template with beautiful color tones. I would improve the shape of the align-items, position of the images.
What challenges did you encounter, and how did you overcome them?The biggest challenge I had was playing with color tones and positions when justifying the content, I solved it by calling the class by its id and its companion in this case were title size (h3), words (p).
What specific areas of your project would you like help with?I would like to receive help in the summary_item class since justify-content was difficult for me, with the goal of not being able to separate the letters from the numbers. thanks muchs.
Community feedback
- @danielmrz-devPosted 5 months ago
Hello there!
Congrats on completing the challenge! โ
Your solution looks great!
I have a suggestion:
- Since you set grid to the body, but you didn't set the size of the rows, your footer is pushing your card up a little bit. You can prevent that from happening adding this to the body:
grid-template-rows: 90% 1fr;
Then your card will always occupy 90% of the space and the footer will adapt in the remaining space.
Also, you mistyped
min-height: 100vh
, once you correct it, your card will be centered.I hope it helps!
Other than that, you did an excellent job!
1@CreativeLogicPosted 5 months ago@danielmrz-dev
I always had this issue and stopped using attribution because of it.
Is there a similar solution when using flex on the body instead of grid?
Also wouldn't this make it so it's not perfectly centered since it is centered only within 90% of the space? What's the solution to have an attribution and have it perfectly centered.
1 - @kodan96Posted 5 months ago
hi there! ๐
you applied
justify-content: space-between
to your.summary_item
selector, which has only one direct child, so it can separate your elements. just applywidth: 100%;
andjustify-content: space-between
to your.flex_group
selector. if you want to make your style more like the original, you need to separate your img and the h3 element from the paragraph:<div class="flex_group"> <div> <img/> <h3> </div> <p> </div>
this way
.flex_group
will have 2 direct child, not three and it can span the two to the two sideHope this was helpful ๐
Good luck and happy coding! ๐
1
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