Hey everyone. I’m hoping someone can help me troubleshoot this overlapping grid issue.
I’m currently revamping my site, but my grid layout appears vastly different on the published/live site compared to Designer preview. Specifically, elements are overlapping at the 1920px breakpoint, even though everything looks correct preview.
Here’s what I’ve already tried:
Renaming child classes sequentially to rule out conflicts
Ensuring the grid parent/container is set to relative positioning
Duplicating the grid and even creating a fresh test grid on the page
None of this has fixed the issue so far. Has anyone run into a similar issue between preview and live?
It seems the Grid child position settings from 1280px is overriding the settings enabled in the 1920px breakpoint. In the ‘Work’ page the grid works as expected because the settings are all defined at the Base desktop breakpoint and starting from 1280px and up the larger breakpoints follow what has been defined in the desktop breakpoint.
So, if you want to tweak how the grid is shown at 1280px (i.e. different from how desktop breakpoint shows it), then you can first style those settings, then move up the screen size and tweak it for 1440px and then for 1920px. That way larger breakpoints would honor what you have set specifically for those breakpoints.
Select each king-text-wrapper elements in the grid that you want to fix the layout for in both 1920px and reset it.
Then start setting the layout from desktop breakpoint, to 1280px, to 1440px and so on if those breakpoints need to look different from the base desktop breakpoint.
When I test this out on the live site, design wise it works when the 1920px settings override the established 1280px styling and it looks as expected.
Thanks man, that was a simple fix! I really started to rack my brain and get lost in the weeds a bit. After adjusting 1280 first, then ascending everything fell in place. Btw Memberstack makes great products!
