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.


  • Is this a navigation menu? Or a list of content elements, for example pictures?
    – musefan
    Commented Jun 26, 2020 at 6:09

3 Answers 3


The common way is to use the arrows or chevrons to indicate that the container can be scrolled left/right. If that method is not in consideration, then I suppose, you could use some CSS calc() function to determine the best card size using screen viewport width along with the number of cards in your scroll view.




Can't seem to upload the image.. click the link!


Many applications build nowadays have a horizontal scroll. Users are used to horizontal scroll, no need to worry about it.

In case your targeted audience not that smart like adults. Make use of screen width value and set tabs width accordingly so that one tab will appear of its half-width.

here is the code done using viewport width(VW) unit.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.