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:

Copied!

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:

  1. Right-click on the page and choose Inspect

  2. Hover over each element in the page structure

  3. Look for sections or blocks that extend beyond the right edge of the screen

  4. Identify and correct the styling of that block

To make this easier, temporarily add the following code in Custom CSS:

Copied!

* {
  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

Copied!

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:

Copied!

width: 100%;
  

And if needed:

Copied!

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:

Copied!

@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.