Horizon テーマで中サイズビューポート時にヘッダーが崩れる

[nathank (Nathan Kershaw)]

Horizon のヘッダーは、モバイルとデスクトップの両方で、ほとんどの場合非常にうまく機能しています：

ただし、私には奇妙なアスペクト比を持つ折りたたみスマートフォンがあります。残念ながら、検索バーとアバターが消えてしまい、全体が少し乱れてしまいます：

これは幅 640〜767px の範囲で発生しているようです。残念ながら、私の折りたたみ機はこの範囲に該当してしまいます！

[Lilly (Lillian)]

私もこれを再現できます。問題は、折りたたみ式スマートフォンや小型タブレットのビューポートサイズ @media (min-width: 640px) and (max-width: 767px) で、ヘッダー内の contents クラスが flex を表示している点のようです:

この幅の範囲でプロパティを contents に変更することで修正できます:

@media (min-width: 640px) and (max-width: 767.98px) {
  .d-header>wrap .contents {
    display: contents!important;
  }
}

Discourse はタブレットとデスクトップの境界に 768px を使用していると思います。

[nathank (Nathan Kershaw)]

でも、その設定にするとむしろ悪化するんです！！オフにすると、デバイスがモバイルと指定されていない限り、767px までのすべてのサイズでヘッダーが崩れてしまいます。

でも、折りたたみスマホには都合が良いですね。ただ、画面が小さくなるとデスクトップブラウザでは困ってしまいます。