スマホでの2カラム設定

Question

https://www.rakuten.ne.jp/gold/marianaocean/

こちらの    部分が
PCでは4カラム、SPでは2カラムに設定したいんですが480px以下の場合に
左よりになっています。

2カラムに設定はどのようにやればいいのでしょうか。
ご教示お願い致します。

Accepted Answer

ECマスターズの田中です。

> 2カラムに設定はどのようにやればいいのでしょうか。

以下は
FlexBoxによる配置が行われており、
横幅を超えると折り返される形になりますので、

左寄りにならないよう２カラムに設定したい場合は、
１つのサイズを、限りなく５０％に近くなるよう
ご設定いただく形になります。

各タグには、
左2px、右22pxの余白が設定されておりますので、

https://www.rakuten.ne.jp/gold/marianaocean/css/style.css
において、「画面幅480px以下の設定」に含まれる
「ul.item-list li」への規則にて、

width: calc( 50% - 24px );
box-sizing: border-box;

以上２つのプロパティをご設定いただくことで
左寄りをできるだけ解消することができます。

ですが、先述の通り、各要素に左2px、右22pxの余白があるため、
差である20pxぶんだけ、左に寄っているように見えてしまいますので、
完全に中央揃えにするには、marginの調整も必要となります。