L’en-tête de Horizon fonctionne très bien la plupart du temps, aussi bien sur mobile que sur ordinateur :
Cependant, je possède un téléphone pliable avec un ratio d’aspect inhabituel. Malheureusement, la barre de recherche et l’avatar disparaissent et tout se décale un peu :
Cela semble concerner une largeur de 640 à 767 px — malheureusement, c’est exactement là où se situe mon téléphone pliable !
Je peux aussi reproduire le problème : il semble que la classe contents à l’intérieur de l’en-tête, qui affiche flex à la taille de vue des téléphones pliables ou petites tablettes @media (min-width: 640px) and (max-width: 767px), soit en cause :
On peut y remédier en modifiant la propriété pour contents dans cette plage de largeur :
@media (min-width: 640px) and (max-width: 767.98px) {
.d-header>wrap .contents {
display: contents!important;
}
}
Je pense que Discourse utilise 768px comme limite entre tablette et bureau.
Je trouve que ce réglage empire les choses !! Avec l’option désactivée, l’en-tête est brouillé à toutes les tailles jusqu’à 767, sauf si l’appareil est spécifié comme mobile.
Mais au moins, mon téléphone pliable est satisfait. Pas mon navigateur de bureau, en revanche, quand l’écran devient petit.