モバイルページレイアウトでテーマが適用されていません

こんにちは。

カスタムテーマを作成しましたが、デスクトップでは正常に動作するものの、モバイル(Safari)では一部のオーバーライド(PluginOutletを使用)が適用されていないようです。たとえば、デスクトップでのカテゴリページは以下のようになります。

デスクトップとモバイルの両方が以下のように設定されています。

私が間違っている可能性のある点について、何かアイデアはありますか?

よろしくお願いします。

「いいね!」 1

管理設定でデスクトップとモバイルで同じレイアウトを設定した場合でも、使用されるテンプレートは同じではない可能性が高いです。両方のテンプレートを調べて、それに応じて宣言を調整する必要があります。

「いいね!」 1

ああ、プラグインのアウトレットが違うんですね。
しかし、テーマからCSSが読み込まれていないようです。

テンプレートには、デスクトップとモバイルで異なるCSSが必要になる可能性のあるいくつかの違いがあるため、ページを検査して、モバイル用の異なるCSSを追加する必要があります(URLの末尾に?mobile_view=1を追加すると、デスクトップデバイスでモバイルビューを取得できます)。

たとえば、デスクトップで境界線を削除する場合、次のようにすることができます。

.category-list tbody .category {
  border: none;
}

しかし、モバイルでは次のようにする必要があります。

.category-list-item {
  border: none;
}

いつかこれらのテンプレートをすべてのデバイスで一貫したものにすると思いますが、これは現在の状況に必要なものです。

「いいね!」 2