Sections not wrapping on smaller screen sizes?

Hello! I'm using text blocks with backgrounds to make pricing cards, but they are not wrapping on smaller screen sizes and it's causing a horizontal scroll. I've used grids to align and style the content of each card, but it doesn't appear to be causing the issue. I can't figure out what else could be the culprit.

https://halibut-oarfish-rfwf.squarespace.com/pricing
pw: goodformepilates

Screen Recording 2024-06-19 at 11.29.42 AM.mov

@Ziggy, thank you SO much! I have been stripping out CSS for hours trying to figure out the problem, and updating the column gap to 29 just solved everything! So grateful for your help!!!

1 minute ago, mbockmaster said:

I have been stripping out CSS for hours trying to figure out the problem, and updating the column gap to 29 just solved everything! So grateful for your help!!!

I've been trying to get this issue resolved for some time! If you can mark my post as the solution and give it a like that might help a little!

Just noticing that I've got some empty space to the right..Is this caused by the columns too?

That's actually caused by narrow columns in your footer and a long single word for the email address:

Ahhhhh thank you SO much!!!!! Seriously! I've been agonizing over this for days

Just now, mbockmaster said:

Ahhhhh thank you SO much!!!!! Seriously! I've been agonizing over this for days

Very happy to have solved this conundrum for you! Now I just need to solve it for everyone else! Setting a maximum column gap of (100vw - (2*--site-margin)) / 24 would do it.

Do you have a preferred way to widen the gaps between elements? A lot of my site sections will need space between elements. My instinct would be to target the blocks and give them a width of 90% and an auto left and right margin, but is there a better way (especially for the client once the site gets handed off) that won't be impacted by the column gap issue in Squarespace?

On 6/19/2024 at 11:29 PM, mbockmaster said:

Do you have a preferred way to widen the gaps between elements? A lot of my site sections will need space between elements. My instinct would be to target the blocks and give them a width of 90% and an auto left and right margin, but is there a better way (especially for the client once the site gets handed off) that won't be impacted by the column gap issue in Squarespace?

With layout like this screenshot, you can consider using Gallery Block, List Section, Summary Block, so you can adjust gap easier.