Design comparison
Solution retrospective
I had to use a negative margin.
(margin-top: -23rem) on .jeanette-container and .patrick-container
I tried grid-gap and row-gap instead but it did not work. Any ideas on how to reduce the large gap between the grid items and reduce the height of the containers ?
Community feedback
- @Jani-BPosted about 2 months ago
Hello,
I would say it is nice work in all :)
I think the problem here is the .kira-container. When the display is over 1400px you have to add to the kira-container the grid-row: 1 / span 2. Currently it takes only 1 column and 1 row. However as the container is longer than the others it will push the 2 other containers long way down. So if you use the grid-row 1 / span 2 -> it should fix the problem. Then you do not need to use the - 23 margin. Then you can use the gap.
Then you can also probably remove the max height 35% from the jonathan and daniel containers (when over 1400px screen width). Then I would also remove the body-containers margin as you can use the gap: 2 rem or similar instead.
It might create a problem on the smaller screen sizes if you remove the margin completely. To fix this I would change so that you use Grid on all the different media query versions and on the wider screens just change the grid-template to different.
I hope you this helps :) sorry if my writing is not the best.
Marked as helpful0 - @SvitlanaSuslenkovaPosted about 2 months ago
Currently on desktop size all your components are in row 1, row 2 is empty. Please consider to review row positions.
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