How to create full width Scrolling Block

If you're looking to make your website more dynamic and visually engaging, adding a full-width scrolling block can be a game-changer. .In this tutorial, we'll guide you through how to create a full-width horizontal scrolling block using custom code that works beautifully with Squarespace 7.1. Please note this code works on Squarespace 7.1 only and not Squarespace 7.1 FE.

Table of Contents

• Why Create a Full-Width Scrolling Block

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Create a Full-Width Scrolling Block?

• Save vertical space while still presenting rich content.

• Add interactive, touch-friendly content for mobile users.

• Improve UX and layout flow on long pages.

A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder.

Complexity: Easy

---

Step-by-Step Instructions

Step 1

Identify the Section ID the map is placed using the plugin mentioned above

---

Step 2

From your Squarespace account, go to Pages > Custom Code > Custom CSS and paste the code into the Custom CSS editor box.

[YOUR DATA SECTION ID GOES HERE] {
  .content-wrapper {
    padding: 0!important;
    max-width: 100%!important;
  }
 .sqs-layout > .sqs-row { margin: 0!important; }
  .sqs-row .sqs-block.map-block {
    padding: 0!important;
  }
}

---

Step 3

Replace the [YOUR DATA SECTION ID GOES HERE] with the actual Section ID, in this example the Section ID is ‘section[data-section-id="62209c00411da57180ef04e6"]’

section[data-section-id="625712951599a84588882ef6"] {
  .content-wrapper {
    padding: 0!important;
    max-width: 100%!important;
  }
 .sqs-layout > .sqs-row { margin: 0!important; }
  .sqs-row .sqs-block.map-block {
    padding: 0!important;
  }
}

---

Key Takeaways

• Full-width scrolling blocks are a modern design element perfect for showcasing content in a clean, interactive way.

• This effect works well across all devices and is especially mobile-friendly.

FAQs

Will this work in Fluid Engine?
No, as in Fluid Engine this can be easily done without the need of codes.

Can I use images inside each scroll item?
No.

Can this be made to auto-scroll?
Yes it automatically scrolls.

---

---

Conclusion

Adding a full-width scrolling block to your Squarespace 7.1 site helps create an immersive and mobile-friendly experience while letting you present more content efficiently. This simple addition can make a big visual impact.

See other related blogs

• How to create full width Instagram block

• How to create full width Map block

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.