pulibrary / pul_library_drupal

Deprecated - Princeton University Library Core Site Drupal Codebase
https://library.princeton.edu/
GNU General Public License v2.0
3 stars 0 forks source link

"Main Menu" displays improperly at 1200px screen width #2013

Closed ishasinha1 closed 1 year ago

ishasinha1 commented 1 year ago

Expected behavior

The main menu looks the same when the screen width is 1200px as when its 1201px.

Actual behavior

It looks bad.

Weird main menu display at 1200px screen width

Steps to replicate

Open https://library.princeton.edu/ and set screen width to 1200px in DevTools. I was using Chrome when I discovered this bug. @sandbergja confirmed that Firefox has the same behaviour.

Impact of this bug

Users whose screen is this wide will have trouble using the navigation menu because it's not visible.

Implementation notes

The bug exists in the following CSS stylesheet: https://library.princeton.edu/sites/default/files/css/css_iId7c4jk4knToWZobfc4SHZ8B2QF3Evq-95fACcC8AM.css. Some media queries use min-width:1200px while some use max-width:1200px. We want the relevant 'max-width's to be 1199px.