search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
728 stars 63 forks source link

8a9c49be.korigamik-github-io.pages.dev - Items are misaligned #137370

Open KorigamiK opened 1 month ago

KorigamiK commented 1 month ago

URL: https://8a9c49be.korigamik-github-io.pages.dev/

Browser / Version: Chrome 125.0.0 Operating System: Linux Tested Another Browser: Yes Firefox

Problem type: Design is broken Description: Items are misaligned Steps to Reproduce: Using Chrome on a mobile device with width <= 360px the nav bar is not aligned in the center properly according to justify-content: evenly and is shifted to the right a little. However, firefox on the same dimensions renders the navbar correctly with the navbar in the center.

View the screenshot Screenshot
Browser Configuration
  • None

From webcompat.com with ❤️

KorigamiK commented 1 month ago

Here's a screenshot of the same page on firefox which shows the correct alignment:

Screenshot 2024-05-24 at 13-13-40 Blog KorigamiK

For now I have only been able to solve this by creating a breakpoint on small devices and change justify-content to center instead

softvision-raul-bucata commented 1 month ago

We appreciate your report. I was able to reproduce the issue by following the steps to reproduce:

Screenshot_18

Tested with:

Browser / Version: Firefox Release 126.0 (2016019903-🦎126.0-20240509170740🦎)/ Firefox Nightly 128.0a1 (2016022007-🦎128.0a1-20240520180757🦎)/ Chrome Mobile Version 125.0.6422.72 Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density) Operating System: Oppo Find X5 (Android 13) - 1080 x 2400 pixels, 20:9 ratio (~402 ppi density)

[qa_21/2024]