monaspace
monaspace copied to clipboard
Website is too wide on desktop, causing horizontal scroll
Description:
On the Monaspace website when viewed on desktop, the webpage is too wide, resulting in an undesirable horizontal scroll. This issue caused by elements styled with the 100wv value, which can be replaced with 100% to prevent horizontal scrolling. Screenshots of the places that caused this issue attached.
Steps to Reproduce:
- Access the website on a desktop browser.
- Observe the horizontal scroll appearing due to the width styling.
Expected Behavior:
The webpage should not have a horizontal scroll on desktop view. Adjusting the styling from 100wv to 100% should resolve this issue.
Additional Information:
Browser: Google Chrome Version 119.0.6045.124 (Official Build) (64-bit) Operating System: Windows 11 Pro x64 22H2
Seems to be a Chrome only issue.
No horizontal scroll on Mozilla Firefox 119.0.1-1 (2023-11-07, snap-id: 3wdHCAVyZEmYsCMFDE9qt92UV8rC8Wdk).
Hrm, not seeing it in arc, trying in chrome
Not able to reproduce on Chrome 119.0.6045.123 on MacOS, will try with my windows machine later today.
@idan I can confirm horizontal scroll bar in Google Chrome (Linux). My Google Chrome version: 119.0.6045.123
.
Here is the image as proof. ⬆️
As for the fix, adding this property to body tag seem to remove the horizontal scroll
overflow-y: auto;
overflow-x: hidden;
The website works fine after these changes.
I am experiencing this in Firefox 119.0.1
.