MartinMurray Posted November 2, 2021 Share Posted November 2, 2021 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.😇 Your Martin Link to comment
Wolfsilon Posted November 2, 2021 Share Posted November 2, 2021 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; } } MartinMurray 1 Link to comment
MartinMurray Posted November 3, 2021 Author Share Posted November 3, 2021 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
MartinMurray Posted November 16, 2021 Author Share Posted November 16, 2021 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
alittlemarketing Posted January 19, 2022 Share Posted January 19, 2022 Is there a way to change to color of the scroll bar? Link to comment
MartinMurray Posted October 25, 2022 Author Share Posted October 25, 2022 Sorry - Don't know! but adding <style></style> should do it? Your Martin Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment