monaspace icon indicating copy to clipboard operation
monaspace copied to clipboard

Website is too wide on desktop, causing horizontal scroll

Open Kagameow opened this issue 1 year ago • 5 comments

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:

  1. Access the website on a desktop browser.
  2. 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

image image image

Kagameow avatar Nov 10 '23 18:11 Kagameow

Seems to be a Chrome only issue.

No horizontal scroll on Mozilla Firefox 119.0.1-1 (2023-11-07, snap-id: 3wdHCAVyZEmYsCMFDE9qt92UV8rC8Wdk).

fdemmer avatar Nov 10 '23 20:11 fdemmer

Hrm, not seeing it in arc, trying in chrome

idan avatar Nov 11 '23 00:11 idan

Not able to reproduce on Chrome 119.0.6045.123 on MacOS, will try with my windows machine later today.

idan avatar Nov 11 '23 00:11 idan

@idan I can confirm horizontal scroll bar in Google Chrome (Linux). My Google Chrome version: 119.0.6045.123.

image 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.

image

K4R7IK avatar Nov 11 '23 11:11 K4R7IK

I am experiencing this in Firefox 119.0.1.

CallumWatkins avatar Nov 19 '23 14:11 CallumWatkins