Itqualityassurance
- How do I fix the horizontal scroll in mobile view?
- Why is there horizontal scroll on mobile?
- Is horizontal scroll accessible?
- How do I make my mobile scroll horizontal?
How do I fix the horizontal scroll in mobile view?
Check all of your elements on "Mobile" view, and remove any high margins to the left or to the right side of the element. The mobile horizontal scrolling has been caused by setting a high fixed / minimum width for an element. Set elements to "auto", or just reduce the width on mobile devices.
Why is there horizontal scroll on mobile?
Horizontal scrolling allows users to see options within a category by swiping to the side, or scrolling down to see different categories. This use of two dimensions helps users by showing a variety of options without making them visit separate category pages.
Is horizontal scroll accessible?
It presents challenges for accessibility.
A page element with both horizontal and vertical scrolling can disorient, and is difficult for people with motor impairments to use.
How do I make my mobile scroll horizontal?
To implement this, we can use overflow:scroll on mobile, it will display scrollbars and make the content inside the box scrollable, preventing the content rendering outside the box. Use flex:none on mobile to “fix” the tags height, and max-width: fit-content on desktop to “fix” the tags width.
