Design comparison
Solution retrospective
- how to have equal padding on top, bottom, left and right? I set the same padding for all of them but still different.
Community feedback
- @correlucasPosted over 2 years ago
Aman, congratulations for your solution!
Can you explain your question?
I saw that you've used gap inside the grid and your .container is already centered. I can see your solution working properly only the card is a little bit different from the design card but is only a matter of fixing the card padding.
What you want to change? Which padding you refer?
Marked as helpful1@AmandagnePosted over 2 years ago@correlucas I used the same padding for all the edges of the container. but still the bottom one seems much bigger one the other ones. and I also used the same flex gap for all the divs inside the .container. but the space between the last paragraph in the .container and the container itself is bigger compared to the others.
0@correlucasPosted over 2 years ago@Amandagne Note in the comparison view that the gap-column is a little bit smaller than the gap-row they
re not the same value. The values are these:
row-gap: 24px; column-gap: 30px;`You can check if there's not a line-height in some heading or paragraph that's creating an additive padding. If you set a
line-height
bigger than thefont-size
itself or a value biggerfont-size: 1;
this creates a little space between lines.You check if this line-height that's causing this strange behavior. If you set --- * { line-height: 1;} --- for all elements you can see if the problem comes from line-height, but then you've to remove this value to don't broken the elements excluding the default line-height.
Then tell me if you found what was causing this space between the p, ok?
Happy coding.
Marked as helpful1@AmandagnePosted over 2 years ago@correlucas Okay. I'll check it and fix if it's there. Thank you by the way you are very helpful.
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