L’intestazione su Horizon funziona molto bene nella maggior parte dei casi, sia su mobile che su desktop:
Tuttavia, possiedo un telefono pieghevole con un rapporto d’aspetto particolare. Purtroppo la barra di ricerca e l’avatar scompaiono e tutto si disorganizza un po’:
Sembra che ciò accada per una larghezza compresa tra 640 e 767 px – proprio dove si colloca il mio dispositivo pieghevole!
Posso riprodurre anche io il problema: sembra che la classe contents all’interno dell’intestazione, che imposta flex per le visualizzazioni di telefoni pieghevoli o tablet piccoli @media (min-width: 640px) and (max-width: 767px), sia la causa:
Il problema può essere risolto modificando la proprietà in contents per quel intervallo di larghezza:
@media (min-width: 640px) and (max-width: 767.98px) {
.d-header>.wrap .contents {
display: contents!important;
}
}
Penso che Discourse utilizzi 768px come limite tra tablet e desktop.
Tuttavia, trovo che quella impostazione peggiori le cose!! Con essa disattivata, l’intestazione risulta distorta a tutte le dimensioni fino a 767, a meno che il dispositivo non sia specificato come mobile.
Ma almeno il mio telefono pieghevole è soddisfatto. Solo che il mio browser desktop non lo è quando le cose si rimpiccioliscono.