[Resolved] Switch from four-column layout to two-column layout at 1366px width

[Jason]

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.

https://fullcleared.com/

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!

[Fernando]

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%;
}
}

[Jason]

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!

[Fernando]

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%;
}
}

[Jason]

Beautiful thank you so much!

[Fernando]

You’re welcome, Jason!

[Author]

Posts