Create A Full-Width Scrolling Marquee in Squarespace | Squarespace Scrolling Marquee Tutorial
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!
---
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
---
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! Cool right?!
To add these to your site, I recommend installing them in your Squarespace CSS file under design → custom CSS.
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 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!
https://chrome.google.com/webstore/de...
Here is the code from this tutorial; be sure to change the data section id so it works for your 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
}
- -
🔗 RELATED VIDEOS 🔗
Squarespace Scrolling Marquee Tutorial - How To Create Scrolling Text in Squarespace - New Feature! • Squarespace Scrolling Marquee Tutoria...
How To Change Scrolling Marquee Font in Squarespace // Custom Scrolling Text in Squarespace: • How To Change Scrolling Marquee Font ...
How to use CSS in Squarespace // A Free Training on the Basics of CSS for Squarespace 7.1: • How to use CSS in Squarespace // A Fr...
- -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
- -
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
---
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
---
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
