Description

On Android mobile devices that first load the website, the header width is wider than the actual viewport. This results in the user not being able to see the hamburger menu. This may be very detrimental as users may not realize that there are other pages present on the website. The header width seems to correctly re-adjust upon scrolling.

The possible cause of this issue is that the hamburger menu's media query is using max-width, while the other media queries use a min-width property. In addition, the order of the media queries may be causing this issue. This is because min-width media queries should be sorted in an ascending order, while max-width queries should be in a descending order of viewport width.

A possible solution to this issue is to readjust the media query to use min-width. Or, to ensure that the mobile hamburger menu is the initial default, and it would only be replaced by a regular navigation menu on desktop screens via a min-width media query.

Steps to Reproduce

Clear the browser's cache on the mobile device. If not on a mobile device, another option is to use Developer Tools on the browser or use BrowserStack to emulate an Android device.
Navigate to the URL karinasong.com.

Expected Result

The user is able to see and directly tap the hamburger menu within their screen's viewport.

Actual Result

The webpage screen is wider than the device's viewport width. The user is only able to see the hamburger menu if they horizontally scroll.

Environments

This issue is present on Android mobile devices across all browsers.

Screenshots

https://user-images.githubusercontent.com/78467590/226505047-b632ec98-02cf-4988-9909-7d53d0fa645c.mp4

Syransong / portfolio-2022