Jump to content

Full width scroll block on mobile not working

Recommended Posts

Site URL: https://shuifeng.squarespace.com/

Page 1: https://shuifeng.squarespace.com/books   (page created In SquareSpace 7.1 with Fluid Engine, scroll block not full width on mobile)


Page 2: https://shuifeng.squarespace.com/feng-shui (page created in SquareSpace 7.1 without Fluid Engine, scroll block is full width in both desktop & mobile)
 

Half way down the page (Page 1) is the scroll block. It is full width and works fine on desktop but it is not full width on mobile. Below is the code I'm using. Interestingly, I have another full width scroll block created in SquareSpace 7.1 without fluid engine (Page 2) and it works fine on desktop/mobile with the code below. I've double checked the section ID is correct. What am I doing incorrectly?

Thanks

section[data-section-id="631009777eff214415a3c911"] {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: 0 !important;
      margin: 0px auto !important;
      display: contents;
  }}

 

Edited by ShuiFeng
Link to comment

Hi @ShuiFeng, you should be able to do this without code. In Fluid Engine, you control the design on mobile separately to on desktop, so if you edit the page, then click on the mobile icon (top-right of screen), scroll down to the section and drag the scroll-block width to the left edge and then right edge, and it should now appear scrolling edge-to-edge on mobile.

Please let me know if this worked, and upvote if this was helpful!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.