Design comparison
Solution retrospective
The grid-gap is not working on my media queries so I adjusted the gap with the use of margins. Any feedback will be appreciated. Thank you everyone. Here is my code: .column-1 { height: 80vh; margin-left: 77px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.column-2 {
height: 80vh;
}
.column-3 {
height: 80vh;
margin-left: -77px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
Community feedback
- @surphuryPosted over 3 years ago
Try with
gap:20px;
Marked as helpful0@surphuryPosted over 3 years ago@KurtGonzales
gap
is the shorthand forcolumn-gap
androw-gap
and It can be used in grid and flex... I think you actually can't usegrid-gap
because it's the obsolete one... Basicallygrid-gap
no longer exists. I hope this help you.0 - @kem522Posted over 3 years ago
Nice solution!
I'm not sure where you were trying to put the
grid-gap
but I got it working in the browser by addinggrid-gap
to the.columns
class inside the media query. Grid gap should always be applied to the parent element of the grid components, that is to say the same element that you adddisplay: grid;
to.Hope that helps!
Marked as helpful0 - @MojtabaMosaviPosted over 3 years ago
On the mobile view the content is squashed, in my opinion it's better if you only set a max-width on the container and center it horisontally instead of setting width on each column.
Keep 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