Jump to content

Certain sections of pages are occasionally wider than the browser window/viewport at narrower desktop widths

Go to solution Solved by playfulphoenix,

Recommended Posts

Note: As the website is under construction, I must have it password protected

I have a bizarre issue with the width of certain content sections that I can't, for the life of me, determine a root cause for. Unpredictably, some sections of some of my pages will not wrap their contents when the browser width is on the narrower side, but still above the mobile breakpoint. The top and bottom sections respect the width of the viewport, but the middle section does not.

Instead, the section of the page will start to extend beyond the right edge of the page (or, to put it more technically, will maintain a width larger than the width of the viewport) at a viewport width of ~1250px. As the width shrinks, more and more of the content of the section overflows beyond the right edge of the browser window and is not visible unless the user scrolls horizontally. This DOES NOT affect any other section of the page, which wraps its contents as you'd expect, to remain within the viewport width.

I have literally built and rebuilt each section on this page manually several times, and have had this issue appear or not appear in most of the sections individually, without any actual comparative change to the contents of the section or the layout of the blocks within it. I've also tried removing any and all custom CSS or code injection, and it has no effect on the presence of this issue.

What else can I try to troubleshoot this?

Edited by playfulphoenix
Link to comment

We can use code to fix it...but you can try using List Section (or People section) for this section. I think list won't create this problem.


just a quick example with List Section


when resize browser




Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

Appreciate the suggestion, @tuanphan! I did as you suggested, and stylized the section to match, and the exact same issue recurred. However, in replicating it in this manner, I think I've discovered the root cause: if, for a section, the horizontal gap width is set above ~35px or so, this problem occurs, and the severity is exaggerated the larger the gap with is set to.

Curious if anyone can replicate this, but that reads to me as a bug with whatever layout logic Squarespace uses. Will spend some time today to interrogate this further/understand the bug better.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.