When a section of your site scrolls horizontally and spans the width of the screen - especially common on mobile - you need to make sure that it spans the whole width of the screen. By default, it won't extend into the padding area around the page's content, so it will look like the edges are being cut off. The solution is usually to add some negative horizontal margin to the scrolling section so that it extends to the screen edge, then add an equal amount of padding so that when the section is scrolled to one of its endpoints the edge of its content lines up with the edge of the rest of the content on the page.
Try out these two examples!
igaK
Lorem ipsum dolor
sit amet, consectetur adipiscing elit
Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
igaK
Lorem ipsum dolor
sit amet, consectetur adipiscing elit
Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
(this UI is a work of fiction and any resemblance to a real UI is definitely a total coincidence)
But what if you're on desktop, where content is frequently confined to a column in the center of the screen? I don't have a perfect solution, but you could try adding a constant amount of negative margin and positive padding, then making the edges fade.
2025-11-11
↑ Home