Design comparison
Community feedback
- @xaintobasPosted 4 months ago
Hi @cmadoka2003,
Nice work on your design! Here are a few opportunities to enhance it:
Spacing below the "content" div: I noticed there is a lot of space below your "content" div. To fix this, consider updating your grid container styling from:
.content { width: 1030px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; }
to:
.content { width: 1030px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); }
Using
auto
ingrid-template-rows: repeat(2, auto);
will help adjust the row height dynamically based on the content.Mobile screen adjustments: For better responsiveness on mobile screens, consider removing the
height: 100vh;
from yourbody
element. This can help avoid unnecessary scroll issues.These adjustments should help improve your design. Let me know if you have any questions or need further assistance!
Hope to be helpful.
Marked as helpful1
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