はじめまして

EC-CUBE　4.2.1　で、テンプレートを使わずデフォルトのデザインでサイトを作っています。

PCやタブレット、スマホの横長では、
商品検索、ログイン、カートなどの表示があるのですが、
スマホを縦長にすると、見えなくなってしまいます。

カート内の商品数（オレンジの丸と数字）は見えますが、他が真っ白です。

<div class="ec-headerNaviRole">
の背景を有色にしても、縦長モバイルのみ変化しません。

どなたか解決法をご教示願えませんでしょうか？

ブラウザの開発ツールを使って確認するやデザイナーさんに確認すると良いのではないでしょうか。

----------------
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
EC-CUBEインテグレートパートナー【ゴールド】ランク
M&I Works
URL: https://miworks.biz/
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

mcontactさま

ありがとうございます。

たしかに、
chromeの開発ツールで確認すると、

_11.2header.scss
_prpjects.scss

等のスタイルシートで、

.ec-headerNaviRole
.ec-headerNaviRole__search
.ec-headerNav__itemLink
.ec-cartNavi__price

などが、

display: none;

になっていますね。

このあたりを自分で調整するしかないのでしょうかね？

もしくはスマートではありませんが、
「スマホでのお買い物は横向きの状態でご利用ください」
みたいな表示にするとか・・・

> このあたりを自分で調整するしかないのでしょうかね？

御社がどんなデザインを希望し、デザイナーまたは企画者がどんなデザイン依頼をして、どんなデザイン設計をしているか次第だと思います。
そしてデザイン設計に沿って御社がどんな作業範囲なのか次第と思います。
御社の作業範囲ならデザイナーまたは企画者にデザイン依頼の指示に沿って作業をする必要があるという事です。

デザインについて、EC-CUBEおよび開発コミュニティが指示および調整する事はありません。

----------------
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
EC-CUBEインテグレートパートナー【ゴールド】ランク
M&I Works
URL: https://miworks.biz/
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

承知いたしました。

ありがとうございました。

今後ともよろしくお願いいたします。

メディアクエリの追加: CSSのメディアクエリを使用して、スマートフォン縦長表示用のスタイルを追加することができます。以下は一例です。

@media screen and (max-width: 480px) {
.ec-headerNaviRole {
/* 縦長モバイル用のスタイルを追加 */
background-color: #your-color;
/* 他の必要なスタイルも追加 */
}
}

このように、@mediaルールの中でスマートフォンの幅に合わせたスタイルを指定することで、縦長表示時に適切なスタイルが適用されます。

ありがとうございます。

メンテナンスモードを無効にすると、正常にヘッダーブロックが表示されました。

皆様お騒がせしてすみませんでしたm(__)m