お世話になります。
UNIVERSEの商品詳細ページの画像についてです。
サムネールの写真がPCでは問題ないのですが、スマホで見るとサイドのマージンがない状態でずれた感じになってしまいます。また商品によっては3つのところで写真が2つしかなかったりすると、横並びの余白が広がってしまいます。
独自CSSで入力してはみましたが、変わりませんでした。すみませんがご指導の方よろしくお願いします。
https://chocolumbus.shopselect.net/items/23770668
ご質問ありがとうございます。
商品ページの画像レイアウト設定が「まとめてギャラリー」の場合、2枚目以降の画像サムネイルはスワイプスライダーになって表示されます。
さらにその状態で、商品画像が2枚しかないにも関わらず「写真サムネイル表示」が「3つ並び」や「4つ並び」になっている場合、どうしてもそのような状態になってしまいます。
商品ごとにページをカスタマイズしていくわけには行かない、ECサイトにおいて、まず最も良い状態としては「できるだけ商品全体で商品画像数を統一し、上記の設定を決める」のがベストですが、解決策としては次のような順でご検討ください。
解決策
まずは「画像レイアウト（ OFF:2枚目以降は広いエリアで）」をご検討ください。
この場合、サムネイルは別エリアにて、スワイプスライダーではなく単純な配置でレイアウトされますので、画像数がバラバラでもさほど違和感が出ません。
次に「写真サムネイル表示：2つ並び」をご検討ください。
どうしても今回のような設定がお好みでその状況を避けられない場合、独自CSSで以下のコードをご利用ください。（今回ご相談の点だけを解決することを目的としていますので、様々な条件の組み合わせによっては他の課題が現れるかもしれませんことだけご留意ください。）
.photoThumbs.thumbClm3 ul li,
.photoThumbs.thumbClm4 ul li {
width: auto;
}
すみません。レイアウト的にはクライアントの要望でこの形がベストなため、独自CSSで対応してみました。確かに写真と写真のマージンはなくなったものの、一番懸念している全体のマージンが左にズレたままになってしまい困っています。スマホの時だけなのですけど、ターゲット考えるとスマホユーザーが多いため、ご指導よろしくお願いします。
こんな感じです。独自CSSのところはメディアCSSは指定できるんでしょうか？？
https://gyazo.com/aa655c4c43a0819da5c9c94acd1cce77?fbclid=IwAR25Sx2LRg0Kl48BeUTuAj5H81zHW_F_pQt2QKo0GrBIOsGDeo6JdqvF7C8
> メディアCSS
というのがブレイクポイントを指定するCSSが記述できるか？ということでしたら、もちろん可能です。
@media screen and (xxx) { }
のように、必要なポイントを指定してマージンを取っていただければ大丈夫です。
ただ沢山の商品画像があるページがどうなるかも合わせて確認しながらCSSを調整して頂く必要はあるかと思います。
@media only screen and (max-width: 480px){
.photoThumbs .thumbClm3 {
margin: 20px ;
}}
でやってみましたがうまくいきません。。。
コメントしたのですけど返答いただけると助かります。
お試し頂きありがとうございます。
こちらの商品数による特定条件での表示について、ケースとしては一般的に考えられるものであるといえるため、テーマ側にて調整対応させていただきました。
テーマアップデートは昨日自動配布されておりますので、一旦「独自CSS」を削除してご確認いただければと思います。
どうぞ宜しくお願いいたします
このサイトでサポートしているテーマは、常にご質問を受け付けており、
どんなご質問やカスタマイズのご相談も、デザイナー自身が積極的にお返事しています。
BASEでショップを運営するための相談所としてご利用ください！
BASEに新機能が追加された際や、テーマにさらなる機能追加を行った際など、
ご購入いただいた方にはテーマの無料アップデートを提供しています。
アップデートが行われた際には、ご購入頂いたテーマも自動的に更新されますので安心してご利用頂けます。
※ HTML編集Appを利用して作成したテーマは、その編集内容を保護する為に自動更新はされません。
その場合でも「購入済みテーマ」からいつでもそのテーマの最新バージョンを取得可能です。
