search

githubnext / monaspace

An innovative superfamily of fonts for code
https://monaspace.githubnext.com
SIL Open Font License 1.1
13.18k stars 220 forks source link

Website is too wide on desktop, causing horizontal scroll #53

Open Kagameow opened 8 months ago

Kagameow commented 8 months ago

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

fdemmer commented 8 months ago

Seems to be a Chrome only issue.

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

idan commented 7 months ago

Hrm, not seeing it in arc, trying in chrome

idan commented 7 months ago

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

K4R7IK commented 7 months ago

@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

CallumWatkins commented 7 months ago

I am experiencing this in Firefox 119.0.1.