ランキングで指定した商品毎の横幅をPC表示とスマホ表示で変えたい
ランキングで商品毎の横幅を210pxと指定していますが、スマホで表示した際に2列にしたいのですが、サイズが大きすぎて縦に一列に並んでしまいます。
カスタムCSSで対応できますでしょうか？
イージーマイショップのデザインテンプレートはレスポンシブ対応となっており、
スマホ表示では、700px以下の画面幅の場合に異なるスタイルを充てております。
ただし、スマホ画面は現在「375px」となりますので、ランキングの幅を210pxとした場合、
画面幅に収まらないことから1列になってしまっていると思われます。
以上から回避策としては次のいずれかとなります。
・ランキングをスマホ用/PC用で2種類を作成
ランキングパーツをスマホ用(商品毎の横幅は150px程度を推奨)とPC用で2種類作成し、
レイアウト管理(デザイン設定>レイアウトタブ)にて作成したランキングパーツを同じ場所に配置していただき、
各パーツの[表示区分]はPCであればスマホのチェックを外す、スマホ用はＰＣのチェック外してください。
・CSSで指定(ランキングは1種類のみ)
テンプレートの「design.css」にＣＳＳを追加してください。
※拡張設定＞デザイン設定のテンプレートタブにて適用中テンプレートの「CSS」から
design.css（デザインテンプレート）の編集が可能です。
※どのデバイスで表示されても共通の「design.css」が適用されます。
スマホ表示のみランキングの横幅(150px)を指定するスタイルの例は以下の通りです。
※全てのランキングに適用されますのでご注意ください。
所定のランキングのみに適用させる場合は、フリーパーツでランキングの前後に<div class="任意のclass名"></div>を追加し、
そのclassをセレクタに追加してください。
または、ページ毎に<body>内に追加されているclassをセレクタに追加してください。
@media screen and (max-width: 700px){
.slides > li.carousel_li {
width: 150px!important;
}
.slides .carousel_li_div {
width: 150px!important;
}
}