Streaming live at 10am (PST)

Adding margin to last element in Horizontal Scroll container

Hey Webflow Community!

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.

Here’s a dribbble shot that is similar to what I’m trying to achieve.

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)

And here is the published site page in question

Thanks for reading, hope you’re having a good Saturday!

Hi

Is This what you talking about?

@shokoaviv Yes, that’s the section I’m working on.

Good afternoon and hope all is well.

I have created a little video for you to watch.

Hope this answers some questions for you.

CloudApp

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:

  1. 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.

  2. 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.

Any chance I could get some help here?

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?