Archived topic
Switch from four-column layout to two-column layout at 1366px width
5 replies · Started by Jason on March 6, 2023
I currently have two sections on my homepage that is a grid layout with four columns on desktop, two on tablet, and one on mobile.
The problem is, the tablet breakpoint is at 1024px width, which is when it shifts over to two columns. I would like just the top two grids (under Latest Stories and Recent News) and switch over to two column at 1366px width. Is this doable via custom CSS?
Thanks!
Hi Jason,
Yes, it's possible.
Try adding this through Appearance > Customize > Additional CSS:
@media (max-width: 1366px ){
.gb-grid-wrapper.gb-grid-wrapper-a30791fd > .gb-grid-column {
width: 50%;
}
}Hi Fernando!
That sort of worked! It changed to two columns at 1366px for the top grid, but not the one underneath Recent News. Also, it no longer goes to 100%, single column for the mobile breakpoint. I tried adding one for 1024px but then it broke formatting from 1024 to 1366.
I have the code snippet live at the moment if you can take a look. Thanks!
I see. Try this instead:
@media (min-width: 769px) and (max-width: 1366px ){
:is(.gb-grid-wrapper.gb-grid-wrapper-a30791fd, .gb-grid-wrapper.gb-grid-wrapper-e93c5074) > .gb-grid-column {
width: 50%;
}
}Beautiful thank you so much!
You're welcome, Jason!
