How To Create A Full-Width Scrolling Marquee in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

The scrolling marquee content block is brand new (April 2022) and in this tutorial, you’ll learn how a little bit of custom CSS for Squarespace can make that block full width, showing scrolling text from one side of the screen to the next!

For this tutorial, you’ll need to place your Scrolling Marquee in its own page section so we can remove the padding and margin that would prevent it from reaching the side of the screen.

You can add a page section above and below it with the same color theme if you want to feature more content that LOOKS like it’s in the same section, without actually being changed by this code!

To change the specific page section, you’ll need to update the code below, replacing the Squarespace data section ID at the beginning of the code with your own unique ID from your Squarespace site.

Here is a link to the Chrome extension I use to grab the Squarespace data section ID–I am not affiliated with this extension or its creator(s) just a fan!

Here is the code from this tutorial; be sure to change the data section ID so it works for your own site!

[data-section-id="1234567890"] .content-wrapper{
padding-left: 0!important;
padding-right: 0!important;
margin: 0!important
}

.Marquee {
width:100vw!important
}

#page{
overflow-x: hidden
}