We love it when Squarespace comes out with a new feature and we couldn’t be happier with this one as we’ve been custom coding autoscrolling text for a while now. What a time saver!

This feature looks great and adds a touch of animation to your website, not dissimilar to a new headline you see on a news channel, it’s attention grabbing and is a good way to shout about what you’re doing currently.

We’ll take a look at a few aspects of this new feature first, then we’ll take a little look in to how you can make the marquee span full width across your site using a little css.

On a little note as much as we love an animation on a site, use this feature sparingly as animation will slow your site down if you use it a lot it can repel instead of attract clients. My old Mac has been whirring like it’s going to take off whilst creating this blog so fair warning.

The Squarespace Options

Content - Change and Add items 

You can add different items in to the marquee, this will allow you to space out your text items so they don’t become one long sentence. You can even incorporate symbols as the pre-written “dream it ➰” you can’t add emoji’s sadly but if you hit “control, command, space” on your Mac this should bring up the emoji/icon window to change the icon. 

Design - This is where the magic happens.

WAVES

You can add a wave in to your scrolling marquee which is perfect for your site to breakup too many straight lines or if your site has that wavy feel already. You can alter the wave intensity and wave width just keep an eye on how this looks both on mobile and on desktop.

We can then change the text style, use either your heading or paragraph text then you can manually alter the size you want the font to be taking out the need to decide between h1, h2, h3, p3 etc. 

We can now alter the direction your text is moving, generally if it’s one you’re going to want it reading right but who am I to tell you what way it’s moving. We then move on to the speed of the transition which you have three settings for. We then have two toggle buttons pause on hover which does exactly that allowing visitors to pause the text by hovering over it possibly making it easier to read, then “Fade Edges” will make the edges of the block fade so either side of the block fades in to the background. 

The final option is “Item Spacing” which is measured in em, this will allow you to increase or decrease the distance between the items giving each one separation so that it doesn’t turn in to one long sentence.

Okay now for the good bit…

How to make the Scrolling feature full width

The general rule with Squarespace is that if you want something to go right to the edge of the display you’re going to have to use a little bit of CSS. For this feature we’re glad they added the “Fade Edges” feature as this means you may not need to make it full width to make it appear like it’s seamless. But here’s how I went about making this full width. 

Padding 

Padding is what makes Squarespace blocks centre in your website, so using the google chrome inspector tool I find what item is causing the padding on the scrolling block, this is highlighted in the green on the inspector tool. 

Through this I can see it’s the “.contentwrapper” class that is adding the padding, so I want to remove that by adding the code. Naturally I don’t want this to apply to every section so I wrap it in a section ID. I use the Squarespace ID Finder chrome extension which is an essential tool if you don’t want to go sifting through the HTML every time to want an ID. 

The only issue I face then is the actual width of the block isn’t wide enough for when I open it up on a bigger desktop. So then I have to target the block itself instead of the section, within the section ID I use the selector .sqs-block-marquee as it’s the most specific class for the block without using a block ID. I make sure it doesn’t add padding by adding padding:0px;

Then I increase the width of the block by going width:150%, this gives me the desired length but it’s width has started from the original spot so I have to move it left which I’ve done by adding left:10vw;

The next issue to resolve was this now added an overflow, I put in the section ID selector overflow :hidden; a lot of these css rules are overriding existing css rules added by Squarespace so I have added the !important tag to these properties to get them to apply. 

Finally we don’t want this width property to be added to mobile as it’s already long enough for mobile so with my pre-set up screen width breakpoints I copy the same rules over but remove the section targeting the marquee blog. 

The @mobile media query I have created prior

@mobile:~"only screen and (max-width: 767px)";

The desktop wrapped in a @desktop media query made previously with

@desktop:~"only screen and (min-width: 768px)"

I hope this has helped anyone with questions on the new scrolling feature from Squarespace. Naturally there will be simpler ways of creating this css code but this was my original work-though.

@media @desktop{
section[data-section-id="*SECTION-ID-GOES-HERE*"]{
  overflow:hidden !important;
  .content-wrapper{
   padding:0px !important;
  }
  .sqs-block-marquee{
    padding:0px !important;
    width:150% !important;
    left:-10vw;
  }
}
}
@media @mobile{
  section[data-section-id="*SECTION-ID-GOES-HERE*]{
  overflow:hidden !important;
  .content-wrapper{
   padding:0px !important;
  }
  }
}

Disclaimer - This post contains affiliate links to Squarespace. That means if you buy through my link, we may receive compensation at no extra cost to you.