バージョン選択

フォーラム

メニュー

オンライン状況

80 人のユーザが現在オンラインです。 (72 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 80
もっと...

サイト内検索

質問 > その他 > 縦長のモバイル表示で、ヘッダーブロックが非表示になります

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
ecabc
投稿日時: 2023/4/26 20:10
対応状況: −−−
新米
登録日: 2023/4/26
居住地:
投稿: 5
縦長のモバイル表示で、ヘッダーブロックが非表示になります
はじめまして

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

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

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

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

どなたか解決法をご教示願えませんでしょうか?
mcontact
投稿日時: 2023/4/27 17:07
対応状況: −−−
登録日: 2022/1/22
居住地:
投稿: 1240
Re: 縦長のモバイル表示で、ヘッダーブロックが非表示になります
ブラウザの開発ツールを使って確認するやデザイナーさんに確認すると良いのではないでしょうか。


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

ecabc
投稿日時: 2023/4/27 17:46
対応状況: −−−
新米
登録日: 2023/4/26
居住地:
投稿: 5
Re: 縦長のモバイル表示で、ヘッダーブロックが非表示になります
mcontactさま

ありがとうございます。

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

_11.2header.scss
_prpjects.scss

等のスタイルシートで、

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

などが、

display: none;

になっていますね。

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

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



mcontact
投稿日時: 2023/4/27 17:55
対応状況: −−−
登録日: 2022/1/22
居住地:
投稿: 1240
Re: 縦長のモバイル表示で、ヘッダーブロックが非表示になります
> このあたりを自分で調整するしかないのでしょうかね?

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

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


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

ecabc
投稿日時: 2023/4/27 17:58
対応状況: 解決済
新米
登録日: 2023/4/26
居住地:
投稿: 5
Re: 縦長のモバイル表示で、ヘッダーブロックが非表示になります
承知いたしました。

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

今後ともよろしくお願いいたします。
akako152
投稿日時: 2023/5/27 14:05
対応状況: 解決済
半人前
登録日: 2021/4/7
居住地: 東京都
投稿: 16
Re: 縦長のモバイル表示で、ヘッダーブロックが非表示になります
メディアクエリの追加: CSSのメディアクエリを使用して、スマートフォン縦長表示用のスタイルを追加することができます。以下は一例です。

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

このように、@mediaルールの中でスマートフォンの幅に合わせたスタイルを指定することで、縦長表示時に適切なスタイルが適用されます。
ecabc
投稿日時: 2023/5/27 20:25
対応状況: −−−
新米
登録日: 2023/4/26
居住地:
投稿: 5
Re: 縦長のモバイル表示で、ヘッダーブロックが非表示になります
ありがとうございます。
ecabc
投稿日時: 2023/5/27 20:28
対応状況: −−−
新米
登録日: 2023/4/26
居住地:
投稿: 5
Re: 縦長のモバイル表示で、ヘッダーブロックが非表示になります
メンテナンスモードを無効にすると、正常にヘッダーブロックが表示されました。

皆様お騒がせしてすみませんでしたm(__)m
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,297名です
総投稿数は109,692件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.