スマホに切り替えたとき画像が出てこない

Question

いつもお世話になっております。

前回の質問でボタンをオーバーすると画像が出てくる動作を教えていただきたのですが、
自社サイトに組み込んだ時、パソコンは問題なく動くのですが
スマホに切り替えたときにメイン画像が表示されません…。
どこの部分が影響しているのかわからず、編集ができずにいます。
ご教示の程、よろしくお願いいたします。

参考サイト
https://brands.onisi.jp/product/bottle/detail/3?color=blue

自社サイト
https://tokeiten.co.jp/time-october-2/

Accepted Answer

ECマスターズの伊藤です。

> 確認した端末はandroid(Xperia)になります。
> ブラウザはchromeです。

デバイスのご確認ありがとうございました。
先程改めてページを確認したところ
メイン画像が表示されておりませんでした。

原因ですが

@media screen and (max-width:600px) { 
	.split-box {
		position:relative;
		width:100%;
		height:auto;
	}
}

の高さがautoになっているため
高さが取得できず、表示されていませんでした。

.split-box

が、その下の商品説明の箇所にも指定されていますので
上記classに高さを与えてしまうと、
説明文の箇所にも影響が出る可能性があります。
そのため、他のclassを設定していただいたほうが
よろしいかと思います。

Answer

ECマスターズの伊藤です。

> スマホに切り替えたときにメイン画像が表示されません…。

iPhoneにて確認したところ、メイン画像が表示されておりました。
現在も解決されていないようでしたら、
ご確認頂いている機種とブラウザを
ご連絡いただけますでしょうか。

お手数おかけいたしますが、よろしくお願いいたします。

Answer

お返事ありがとうございます！
確認した端末はandroid(Xperia)になります。
ブラウザはchromeです。

よろしくお願いします。

Answer

ご回答ありがとうございます。
他のCSSを設定しましたら表示されました！