â–Ľ
Streaming live at 10am (PST)

Horizontal scrolling section on Mobile with no custom CSS/ JS

Hey there,
does anyone know how to make a horizontal scrolling section (without custom CSS/ JS) on mobile as shown in the following videos?


Thank you! I appreciate your help.
Stay safe and have a great day!

Hi,
You need to set the Overflow property to Auto on the Div element that holds all the other elements that are to be scrolled (of course, only on brakepoints for mobiles).

Zrzut ekranu 2020-10-5 o 14.00.54

1 Like

And in this second case, you have to put this div in another div, which will have a specific width and the overflow property set to hidden :slight_smile:

1 Like

Thanks for your reply Mike,
I tried setting the parent to overflow auto and the children elements to 100vw, but the horizontal scroll section isn’t displaying on my mobile phone.

Please view the following video and see if I did anything wrong:
https://cdn.shopify.com/s/files/1/0484/5043/7278/files/Pagefly_-horizontal_scrolling_section-_01.webm?v=1601900650

Thanks Mike!

Can you share your project in read-only mode?
Zrzut ekranu 2020-10-5 o 14.32.20

1 Like

Sure, here’s the link,

Thanks Mike

On the “highlights-card wrapper” collection item in the mobile brakepoint, add the following properties:
Flex-child, Sizing: don’t srink or grow
Change the width e.g. to 90%

Set the overflow property to auto on the “highlights-cards wrapper” item.

1 Like

What I would suggest is adding one div that will hold the content in the collection item. Thanks to this, on a collection item you can give padding instead of margins, and then the value of 100% width will also take into account the side margins and everything will be nicely arranged. Of course, you need to shadow this new div, not the collection item.

Zrzut ekranu 2020-10-5 o 15.00.51

Wow!!!
Thank you so much Mike,
I’m very grateful that you decided to take time out of your day to help me.

It worked perfectly and how I wanted it to!
I really appreciate your help Mike!

Thank you!

1 Like