Browser Resize Text/Button Formatting Issues (7.1 Fluid Engine)

Hi all,

I work with an agency to build/maintain websites for folks (primarily on Shopify). I have a fondness for Squarespace, as I built my first website in 2011 with this service. Things have changed quite a bit since then, and I'm really trying to work with the 7.1 Fluid Engine.

I can't seem to figure out this issue with having awkward breaks in the text when I resize the window. It looks ESPECIALLY bad with buttons, so I used text instead.

My client wants five services in one row, with the image of the company, the text, and a button to view the dedicated page. I'm running into this wild CSS issue with seemingly every page I have worked with - but this one is the worst. Any ideas what I can do?

I was able to figure out the mobile/tablet view thanks to an extension I found.

I really want to offer Squarespace to clients - but this is almost a deal breaker. I'm hoping it's something silly that I have overlooked. I have played with making the blocks different sizes, spacing, margins, font size, custom CSS, etc. to no avail. Any help would be appreciated.

Note that the screenshots are desktop view, with the browser small. Not mobile/tablet view. Attached a few different pages that get funky once the browser is smaller.

Page:

https://dolphin-sealion-8kfs.squarespace.com/case-studies

pw: avadiapril

Also, here's a video of the issue. It expires two days from now. Thanks!

https://streamable.com/kjowsf

The first thought I have is that with a max site width of 2029px you are making your life difficult as your desktop design has to span 2029px - 768px.

With the 5 case study links, what are you hoping to happen on a small desktop screen? The fonts do scale somewhat to help on the large/small screens but not to the extent that a large H3 will fit that text into that space. You could use CSS and a vw value to shrink this text directly with the screen size? You could also try an auto-layout section that would help this either wrap the content below or into a carousel.

When you are using buttons set to FIT you are making the block bounding area too small, there's no need to overly constrain them when there's space. The left button I have given more space (more than 3 columns wide) and it then doesn't wrap to the next line:

It looks like you are leaving text blocks overlapping which is causing you more problems. Any time you do that you have to assume that the content of the overlapping blocks may overlap:

Same goes for the line and text blocks here:

FYI if you own a few Squarespace websites you can sign up as a Circle member and get 180-day trials, you can also request a trial extension from Squarespace support.

Thanks Ziggy! I didn't realize my client was working on the site simultaneously, which shifted a bunch of things on its own. I'll attempt an auto-layout section, and tweak the max site width. Much thanks, will keep you updated.