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!
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).
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
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:
Thanks Mike!
Can you share your project in read-only mode?
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.
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.
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!