kami-kuzu.com - Bottom menu options are misaligned

[webcompat-bot]

URL: https://kami-kuzu.com/news/

Browser / Version: Firefox 103.0 Operating System: Mac OS X 10.15 Tested Another Browser: Yes Safari

Problem type: Design is broken Description: Items are misaligned Steps to Reproduce: bottom menus are misaligned in Firefox. Chrome and Safari are fine.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, but I'm not able to reproduce the issue. The options from the section under "Social media Share", are displayed in a single column.

Affected area:

<ul class="menu">
  <li>
    <a href="/">
      <span class="en">HOME</span>
      <span class="ja">ホーム</span>
    </a>
  </li>
  <li>
    <a class="current" href="/news/">
      <span class="en">NEWS</span>
      <span class="ja">ニュース</span>
    </a>
  </li>
<!--cut out -->
</ul>

Note: The issue is not reproducible on Chrome, where the options are displayed in 2 columns.

Tested with: Browser / Version: Firefox Nightly 103.0a1 (2022-06-23), Firefox Release 101.0.1 Operating System: Windows 10 Pro

Moving to Neesdiagnosis for further investigation.

[qa_25/2022]

[wisniewskit]

Their code unfortunately seems to be going out of its way to do things that will only work on the specific set-ups they've tested on.

The two columns are just list items in an unordered list, which are flex items. But they give everything very awkward precise pixel widths, for no reason that I can see (perhaps this was generated code)?

/* ul's container */
@media print, screen and (min-width: 769px)
.sw-Nav-Content.footer {
  width: 492.1875px;
}
/* ul */
.sw-Nav-Content .menu {
  display:flex;
  flex-wrap: wrap;
}
/* li */
@media print, screen and (min-width: 769px)
.sw-Nav-Content .menu li {
  width: 234.375px;
}
/* every other li */
@media print, screen and (min-width: 769px)
.sw-Nav-Content .menu li:nth-of-type(2n) {
  margin-left: 23.4375px;
}

Unless I'm missing something very obscure, they would be much better off just doing the obvious thing here:

@media print, screen and (min-width: 769px)
.sw-Nav-Content .menu li {
  width: 50%
}
/* and drop the every-other-li rule entirely *

That should work across the board regardless of screen size, font, or the precise pixel widths the browser goes with due to any number of other factors, based on what I'm seeing in their responsive breakpoints.

We'd have to contact them to find out what the point of the precise pixel values are.

[webcompat-bot]

Generate outreach template