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;
}
@surphury
Posted
Try with gap:20px;
Marked as helpful
@KurtGonzales
Posted
@surphury Thank you for that. I will try it.
@surphury
Posted
@KurtGonzales gap is the shorthand for column-gap and row-gap and It can be used in grid and flex... I think you actually can't use grid-gap because it's the obsolete one... Basically grid-gap no longer exists. I hope this help you.
@kem522
Posted
Nice solution!
I'm not sure where you were trying to put the grid-gap but I got it working in the browser by adding grid-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 add display: grid; to.
Hope that helps!
Marked as helpful
@KurtGonzales
Posted
@kem522 Thank you for this!
@MojtabaMosavi
Posted
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 helpful
@KurtGonzales
Posted
@MojtabaMosavi Thank you for your feedback!
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
