The Styled Square | Premium Squarespace Website Templates

View Original

How to remove website overflow/horizontal scroll with CSS (Squarespace 7.0 & 7.1)

PIN TO SAVE FOR LATER!

Have you noticed a frustrating horizontal scroll bar on your Squarespace website?

This is called overflow.

…and while this may not be our most exciting Squarespace tutorial — it’s an important one.

Website overflow is often caused by code snippets implemented in your website that extend the page width, and as a result, causes a horizontal scroll. In this tutorial, we share a quick and easy solution to remove overflow on desktop, tablet and mobile.


Note:
if you have purchased a premium Squarespace template from us, this CSS will already be implemented in your website.

Example of overflow/horizontal scroll:

How to fix horizontal scroll on your Squarespace website

From your Squarespace dashboard, go to:
Website > Scroll down to Website Tools > Custom CSS & copy/paste the CSS below

See this content in the original post

Don’t forget to save!

All set!

USE DISCOUNT CODE STYLEDSQUARE10 TO SAVE 10% OFF YOUR SQUARESPACE SUBSCRIPTION

* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!

More Squarespace tutorials

See this gallery in the original post