Horizontal scroll

Site URL: https://www.arnaldoabba.com/

How does one go about making a page scroll horizontally instead of vertically - like this page: https://www.arnaldoabba.com/ 

I have tried modifying the ishimoto template myself, but just cant seem to get it to work. Are there and CSS gurus out there that can help me with an explanation? Any help is much appreciated.

- Jakob

I'm assuming that both links you shared are the examples, I don't have context of your website to help you. However, it's safe to assume that you'll need a Javascript enabled site.

You can possibly code this yourself if you're adept at Javascript and CSS or you can purchase a plugin to do this for you. If you're using 7.1, I think that sqsmods has recently rolled out a pretty robust horizontal scroll plugin for a reasonable price.

If you're using 7.0, it could be a bit more tricky but if I remember correctly there are some templates that have a horizontal-like features that might be able to be tweaked to meet your liking. Either way, you'll need Javascript to do this and it would be best if you could provide the link to your site. 

Thank you for your response wolfsilon. I figured out how to do it with css and html for anyone interested: https://css-tricks.com/pure-css-horizontal-scrolling/

@jakobsquare did you find a solutions for this yet?  You can do this easily with SquareKicker. Select as many sections as you want to scroll horizontally, choose left to right scroll or reverse, choose a flow into screen, fixed background, and finally this is fully optimised for mobile devices. All without having to touch a single line of code! 

If you only want this single feature, you can uses SquareKicker for a single month and changes will save forever. See tutorial link below/  

https://squarekicker.com/letsmakethis/horizontal-scroll

@Nick_SquareKicker, love your product!  Am going to subscribe after my trial ends.  

I am wondering if we can use SquareKicker to create overflow horizontal scrolling like what is seen on this site: https://insheepsclothinghifi.com/ in the "RECENT EDITORIAL" section.  The content only scrolls left to right if you hover over it and scroll across the page or use the slider. 

11 hours ago, 44degreesnorth said:

@Nick_SquareKicker, love your product!  Am going to subscribe after my trial ends.  

 

I am wondering if we can use SquareKicker to create overflow horizontal scrolling like what is seen on this site: https://insheepsclothinghifi.com/ in the "RECENT EDITORIAL" section.  The content only scrolls left to right if you hover over it and scroll across the page or use the slider. 

Hi @44degreesnorth,  Something like this looks like a scrolling slideshow.  This is not possible with SquareKicker yet, but this is on our roadmap.  I recommend using Squarespace's Auto Layout Section.  It will be very close to this. 

On 10/11/2022 at 10:52 AM, Nick_SquareKicker said:

Hi @44degreesnorth,  Something like this looks like a scrolling slideshow.  This is not possible with SquareKicker yet, but this is on our roadmap.  I recommend using Squarespace's Auto Layout Section.  It will be very close to this. 

Hey @Nick_SquareKicker I can't seem to get the mobile horizontal scroll working on my site whatsoever! it is leaving a large blank gap underneath the section and not completing the full scroll of the section. any help would be amazing!

thanks!

www.moonlitdesign.uk/design-services

Hi @moonlitdesign,

You can Enable Horizontal Scroll on mobile with SquareKicker using the Toggle in the tool settings "Mobile Devices" See Screenshot below.

It's not on by default because normally there is too much content in the section to all fit on a mobile device and content gets cut off on smaller devices so you may want to reduce the content if you want to enable horizontal scrolling on mobile.

It looks like the space you are describing is caused by extra rows in the Fluid Engine Grid.  You can use Squarespace's Mobile Edit mode to reduce these rows.  The rows of a section is one of the only section settings that is unique to mobile and desktop.

If you need further help you can reach out to support@squarekicker.com

16 hours ago, Nick_SquareKicker said:

Hi @moonlitdesign,

You can Enable Horizontal Scroll on mobile with SquareKicker using the Toggle in the tool settings "Mobile Devices" See Screenshot below.

It's not on by default because normally there is too much content in the section to all fit on a mobile device and content gets cut off on smaller devices so you may want to reduce the content if you want to enable horizontal scrolling on mobile.

It looks like the space you are describing is caused by extra rows in the Fluid Engine Grid.  You can use Squarespace's Mobile Edit mode to reduce these rows.  The rows of a section is one of the only section settings that is unique to mobile and desktop.

If you need further help you can reach out to support@squarekicker.com

 

Hey sorry yeah i turned it off just for now, thank you for your reply.
i've switched it back on so you can see whats happening.

i'm not too sure how to describe it to support team!

@moonlitdesign,

When your horizontal scrolling sections appear that have a 1 second delay like there is a transition speed attached to these.  I think this is caused by the below custom CSS which will affect how the page scrolls in. Is this your issue?

@keyframes SlideIn {
    0% {
        transform: translatex(100%)
    }

    100% {
        transform: translatex(0)
    }
}

#page {
    animation: 1s ease-out SlideIn !important
}

11 minutes ago, Nick_SquareKicker said:

@moonlitdesign,

When your horizontal scrolling sections appear that have a 1 second delay like there is a transition speed attached to these.  I think this is caused by the below custom CSS which will affect how the page scrolls in. Is this your issue?

@keyframes SlideIn {
    0% {
        transform: translatex(100%)
    }

    100% {
        transform: translatex(0)
    }
}

#page {
    animation: 1s ease-out SlideIn !important
}

 

Hey no but thank you! i managed to find the culprit. i had body, html overflow-x added to my css. I will have to find another way to stop page movement now hahah!

13 hours ago, moonlitdesign said:

Hey no but thank you! i managed to find the culprit. i had body, html overflow-x added to my css. I will have to find another way to stop page movement now hahah!

That would do it.  It's a common mistake to add an overflow-x hidden to the body and html in attempt to stop overflow as it has other consequences.  You'll want to use overflow-x: clip to just the body which has a better outcome.  

body {
    overflow-x: clip !important;
}

SquareKicker automatically includes this with the SquareKicker build when you use specific features that might cause overflow such as; block position, scrolling effects, etc.

Read more about this overflow css and understanding overflow on Squarespace in a blog post here:

https://squarekicker.com/blog/overcoming-css-challenges-how-squarekicker-handles-sticky-situations