Horizontal scroll on Squarespace is definitely possible! You just need to add a little code to your site to make it happen. Here’s how you can do it:
First, you need to create a custom CSS file. To do this, go to the “Design” panel and click on “Custom CSS.” Once you’ve done that, paste the following code into your custom CSS file:
PRO TIP: While horizontal scroll may be possible in Squarespace, it is not recommended as it can cause issues with site functionality and may not be compatible with all Squarespace templates.
@media screen and (min-width: 1000px) {
.sqs-layout {
overflow-x: scroll;
overflow-y: hidden;
}
.sqs-layout--edges {
overflow-x: hidden;
padding-right: 15px;
}
Next, you need to add some code to your site's header. Go to the "Settings" panel and click on "Advanced."
Then, paste the following code into the "Header Code Injection" box:
<script>$(window).bind("load resize",function(e){var t=$(".sqs-layout");var n=parseInt(t.css("min-width"),10);if(isNaN(n)){n=0}var r=e.currentTarget.innerWidth;if(r>=n){t.addClass("allowScrollX")}else{t.removeClass("allowScrollX")}});</script>
And that's it! Once you've added both pieces of code to your site, you should be able to horizontally scroll your Squarespace site.
7 Related Question Answers Found
There are a few different ways that you can make a horizontal scroll in Squarespace. One way is to use the Block ID feature. This allows you to add a unique identifier to any block on your site.
There are a few different ways to style text in HTML. The most common way is to use the <p> tag. This will automatically add a line break before and after your text, making it appear on its own line.
There are many ways to add scrolling text to your Squarespace website. One way is to use the <b> HTML <u> tag. This tag allows you to style text in HTML using the <p> and <b> tags where applicable.
When creating text on a website, sometimes you may want to make the text vertical instead of horizontal. This can be accomplished by using the <p> tag in HTML. The <p> tag is used to create a paragraph, and it automatically creates a new line after each paragraph.
There are many ways to style text on your website. One common way is to use the < b > tag to make text bold. Another way is to use the < u > tag to underline text.
There are a few different ways that you can add scrolling images in Squarespace. One way is to use the built-in Carousel Block. This block allows you to add multiple images and set them to scroll automatically.
There are many ways to style text on a web page, but the most common methods are to use the ‘<b>‘ and ‘<u>‘ tags. These tags will make the text bold and underlined, respectively. Other tags that are commonly used to style text include the ‘<i>‘ tag (for italics), the ‘<strong>‘ tag (for bold), and the ‘<strong>’ tag (for emphasis).
