Affichage incorrect sur mobile

image
Ce lien Blog s’affiche en bas à gauche de son élément parent sur mobile. Je n’arrive pas à comprendre pourquoi.

Il s’affiche correctement sur ordinateur.

Au cas où : j’ai un autre lien qui n’est visible que sur ordinateur (donc display: none sur mobile) avec du CSS personnalisé pour le décaler légèrement : margin-left: 100px;. Si je désactive ce CSS personnalisé, rien ne change, ce qui n’est pas surprenant.

HTML des liens personnalisés dans l’en-tête :

    <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>

Rien de particulier pour le CSS du deuxième élément li, et le CSS du lien a qu’il contient est le suivant :

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

S’agit-il d’un bug ou est-ce que je passe à côté de quelque chose ?

1 « J'aime »

Je pense que c’est la manière dont le rembourrage du lien s’enroule. Je viens de fusionner une modification qui devrait éviter cela.

1 « J'aime »