Jump to content

Horizontal scroll bar summary block

Recommended Posts

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

Hi All
Need some help with some code for adding Horizontal scroll bar to a summary block (see Mocked-up image) I'm currently using 7.0 Brine and have already tweaked the code to style the Left and Right arrows... My client really  wants a Horizontal scroll bar as the carousel is quite long (29 images) and wants to show the user some sort of progression.

https://testlanding.squarespace.com The Summary block is right at the top 'Land data at your fingertips'
There seems to be a lot of unanswered questions around this topic any help would be massively appreciated.😇
 

Screenshot 2021-11-02 at 19.20.40.png

Your Martin

Link to comment
14 hours ago, Wolfsilon said:

Hello,

You can add the horizontal scroll bar by removing the overflow property on the inner container and with the code that you already have on the Block-ID. Now you should see the horizontal scroll bar.

#block-yui_3_17_2_1_1635200644389_9550{
.sqs-gallery-design-carousel .sqs-gallery-container {
overflow: visible !important;
}
}

 

Thanks for the above -  I couldn’t get that to work (I've only got a bit of code knowledge) 
This seemed to work:

#block-yui_3_17_2_1_1635200644389_9550{
.sqs-gallery-design-carousel .sqs-gallery-container {
overflow-x: visible !important; 
}
}

But is it possible for the scrollbar to be visible from the outset
Also for the Header Text 'Land data at your fingertips' to stay fixed, rather than scrolling off.

Apologies if I've over worked this.
https://testlanding.squarespace.com

Your Martin

Link to comment
  • 2 weeks later...

Sort of found a fix - this CSS gave me the horizontal scroll bar, but only appears with scrolling. Ideally I'd like it to show, to indicate to the user it's there and explore.

 

#block-yui_3_17_2_1_1635200644389_9550{
.sqs-gallery-design-carousel .sqs-gallery-container {
 overflow-x: auto; 
}
}
.summary-carousel-pager {
  position: absolute;
  top: 10%;
  right: 15px;
  transform: translateY(-30%);
  width: 100% !important;
  z-index: 1;
}

Your Martin

Link to comment
  • 2 months later...
  • 9 months later...

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.