Mobile side scrolling: On some screen sizes, the gap between elements land right at the right edge, so it looks like there isn’t any scrolling

I have the elements going off the right edge of the screen to show it's horizontal scrolling.

enter image description here

Issue is at some screen sizes, the gap between elements lands right at the right edge, so it looks like there isn't any scrolling.

enter image description here

We've thought of the following solutions:

  1. animation on page load (issue with this is it can slow down page load, look glitchy, and add extra level of effort to the project)
  2. gradient on the right edge (not a fan of how this looks)

My question is, are there other design solutions? Are there code solutions - like forcing the padding to change so the last element is always peeking in? I feel like there has to be, because how do apps solve this?

Would prefer a simple solution that would work well on a website, not an app.

Thanks!

Tags: , , , , , ,