Falsche Anzeige auf dem Mobilgerät

Beitragen UX
,
1

Bild
Der Blog-Link wird auf Mobilgeräten unten links im übergeordneten Element angezeigt. Ich kann nicht herausfinden, warum.

Auf dem Desktop sieht alles korrekt aus.

Falls es relevant sein sollte: Ich habe einen weiteren Link, der nur auf dem Desktop angezeigt wird (also display: none auf Mobilgeräten) und mit benutzerdefiniertem CSS leicht verschoben ist: margin-left: 100px;. Wenn ich das benutzerdefinierte CSS deaktiviere, ändert sich nichts, was nicht überraschend ist.

HTML für benutzerdefinierte Header-Links:

    <ul class="custom-header-links">
      <li class="headerLink headerLink--vdo 👆adapter-son-yoga.com--custom-header-links headerLink--undefined">
        <a title="Adapter Son Yoga" href="https://adaptersonyoga.com/" target="_blank">
          👆adapter son yoga.com 
        </a>
      </li>
      <li class="headerLink headerLink--vmo blog-custom-header-links headerLink--undefined">
        <a title="Blog" href="https://adaptersonyoga.com/" target="_blank">
          Blog
        </a>
      </li>
  </ul>

Für das zweite li-Element gibt es nichts Besonderes im CSS, und das CSS für den darin enthaltenen a-Link sieht wie folgt aus:

    .custom-header-links .headerLink a {
	padding: .35em .6em;
	color: var(--header_primary);
	font-size: var(--font-up-1);
    }

Ist das ein Fehler oder übersehe ich etwas?

1 „Gefällt mir“
2

Ich denke, es liegt daran, wie der Abstand des Links umbricht. Ich habe gerade eine Änderung zusammengeführt, die dies verhindern sollte.

1 „Gefällt mir“