I’m working on a case study for my portfolio site, and, in the final section, am looking to add a horizontally scrolling list of articles. I would like for the first+last articles to have some margin to them (i.e. to respect the overall grid), but also for the scrolling element to be full-viewport-width when scrolled.
I’ve tried all different alignments on the grid for the element titled “Sources Scroll” but any time I add any margin or padding to the right side of the element (or to the last item in the list), it just shrinks the last item.
Also, the scrolling seems very “stiff” on mobile, any theories as to why?
Here is my read-only link (the page can be accessed through the Projects Template > Design Bridge Page)
Brandon, thanks for the thorough video lesson! I really appreciate the time you spent here. Thanks for pointing out how silly it was to have so many columns manually added!
A couple questions:
Is there a way to make it so that the sources scroll across the full viewport width? Your solution seems to add margins around the scrolling element, which means that it does not span the full viewport. This gif illustrates what I’m trying to achieve well, I think.
Is there a way to make the horizontal scrolling more fluid on mobile? It doesn’t seem to have the inertia present in vertical scrolling on my device.
Hi @Mordechai, sorry for the late followup response.
As for your questions. The answer to 1: You can just remove the padding I added and that should give you the results you are looking for.
For 2: you will most likely need some custom code to create that inertia effect. I am not a coder, therefore I am not sure what the likely steps would be. Maybe @webdev might know a few tricks?
@NathanSmith I wouldn’t even know where that video is. That was prior to my time with Webflow. Could you provide your own issue so I can follow up here?
