Responsive Grid Layout - Grid px width problem

Hello webflow world,

I’ve recently ran into a problem setting up my cms grid at different breakpoints

This is the established grid on the base breakpoint - this is what the client is looking for across all desktop breakpoints above 1200px:

I’ve set the minimum grid column size to 400px in order for there to be four cms grid items on the base breakpoint. My client reached out to me looking to maintain a four column grid in larger screen resolutions instead of a five column grid.

(1440px and up - Client looking to change this to four items and not five items per row)

At the 1440px and up breakpoint, I set the grid column size to 500px in order for one row to fit four cms grid items within the viewport. This successfully changes the larger breakpoint to fit four grid items in one row but somehow changes the base breakpoint and all of my collection items are shorter and now longer fit four items in one row.

(1440px and up - Successfully changing the larger breakpoint to fit four collection items in one row)


(Base Breakpoint - Once I’ve changed the larger breakpoint to fit four collection items in one row, the base breakpoint is changed and now only has three columns and is shorter)

I’ve made sure that nothing is different about the grid settings on the base breakpoint.
Even when I go back and try to change the grid min/max width at the base breakpoint, it doesn’t change anything to the published site.

I’m curious to see if anyone can shed some light on where I potentially went wrong.

Thanks all,
Jared


Here is my site Read-Only: LINK
(how to share your site Read-Only link)