How to Fix Horizontal Scroll on Desktop and Mobile in Squarespace
If your Squarespace website shifts left and right when scrolling either on desktop, mobile, or both, you're dealing with an issue commonly known as horizontal scroll overflow.
This problem is subtle but damaging: it disrupts the user experience, makes your site feel unstable, and can even affect how search engines view your layout on different devices.
Thankfully, with a few adjustments and best practices, you can fix it entirely.
The Problem: Why Is My Site Shifting Side to Side?
In Squarespace 7.1, this horizontal scroll issue usually happens because one or more elements extend beyond the visible width of the page. That forces the browser to enable a horizontal scrollbar, letting the page shift or “wiggle” side to side.
Common Causes:
| Cause | Description |
|---|---|
❌ width: 100vw on internal elements |
Ignores scrollbars and overflows the screen |
| ❌ Fixed-width content (images, code blocks, iframes) | Content doesn't adapt to screen size |
| ❌ Negative margins | Custom CSS with margin-left: -20px, etc. |
| ❌ Long unbreakable content | Long URLs, <pre> tags, or long words |
| ❌ Custom embeds | Scripts or HTML blocks from third parties |
The Fastest Fix (For Most Sites)
Go to Pages → Custom code → Custom CSS, and paste the following code:
html, body {
overflow-x: hidden !important;
}
✔ This immediately removes the horizontal scroll bar and stops the page from shifting side to side.
✔ While this is a good short-term solution, it’s best to find and fix the root cause so the issue doesn’t return.
How to Find the Problem Element
Use Chrome or Firefox’s Inspect Element tool:
Right-click on the page and choose Inspect
Hover over each element in the page structure
Look for sections or blocks that extend beyond the right edge of the screen
Identify and correct the styling of that block
To make this easier, temporarily add the following code in Custom CSS:
* {
outline: 1px solid rgba(255, 0, 0, 0.2);
}
This visually outlines every element on your page, helping you see which one is overflowing.
Targeted Fixes for Common Issues
Here are solutions for specific elements that often cause the shift:
1. Images or Videos Pushing Layout
img, iframe, video {
max-width: 100%;
height: auto;
display: block;
}
This ensures all media scales down within its container and doesn’t push outside the screen width.
2. Section or Container Using width: 100vw
Avoid using width: 100vw on content elements. If you're using custom code that includes it, change it to:
width: 100%;
And if needed:
max-width: 100vw;
box-sizing: border-box;
This allows the element to adapt to the actual viewport width, including scrollbar space.
3. Fix for Mobile Layout Shifting
If the shift appears only on mobile, you can add a media query:
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
}
This ensures your layout stays contained on smaller screens.
Optional: Clean Up Your Sections
If the issue is page-specific:
Try deleting one section at a time in Squarespace Page Editor
Preview after each deletion to identify which section causes the issue
You can then rebuild that section cleanly or wrap it in a responsive container.
Final Thoughts
Fixing the horizontal scroll in Squarespace doesn’t have to be frustrating. By identifying the cause, whether it’s custom code, large images, or embed overflow, and applying targeted CSS, you can eliminate side-scrolling and offer a clean, responsive experience across all devices.
Quick Recap: Horizontal Scroll Fix Checklist
| Task | Result |
|---|---|
Add overflow-x: hidden to HTML/body |
Hides the global scroll |
| Check image widths | Prevents container overflow |
| Audit embeds and custom HTML | Ensures responsive layout |
| Test with DevTools | Confirms mobile and desktop fixes |
Frequently Asked Questions (FAQ)
Why is my website side-to-side scrolling?
This typically occurs when something on the page is wider than the screen (for example, an image, a section, or an embed). It makes the browser enable horizontal scrolling on the target element, which gives an ugly, undesired shift.
Is it possible to prevent the horizontal scroll without changing the layout?
Yes. You can hide the scroll with a quick style modification in Squarespace’s Custom CSS section. But, that's only a band-aid. It is better to identify and correct the particular component that is causing the problem.
Is there a way to know which site is messing up the scroll?
Inspect the element with a Chrome browser to see which element is causing the overflow. These are instruments that let you focus on and test out each different section that could be the problem.
What causes layout shifting on Squarespace the most?
Wide Images or Videos
Sections styled to be full-width with no bounds
Long links or unbreakable text
Negative-margined or fixed-width custom-coded pieces
Content that is embedded but doesn’t resize correctly
Why does the scroll only work on mobile “sometimes?”
Mobile screens are tiny and merciless. If there’s something in your design or content that isn’t quite made for smaller screens, it may cause only a phone or tablet to display oversized content.
Will this not affect the performance or SEO of my website?
Indirectly, yes. A bad user experience, particularly on mobile, can drive up bounce rates and impact how search engines consider your site’s usability.