スマホページのレスポンシブについて

Question

お世話になっております。
https://www.rakuten.ne.jp/gold/●●/sp/test.html
内の
ifarmeタグ⇒https://www.rakuten.ne.jp/gold/●●/template/new_item.html
こちらスマホ端末のサイズが小さくなると二列ずつが一列になるので
二列固定になるようにするにはどうすれば宜しいでしょうか？

ご確認宜しくお願い致します。

Answer

ECマスターズの北原です。

>ifarmeタグ⇒https://www.rakuten.ne.jp/gold/●●/template/new_item.html
こちらスマホ端末のサイズが小さくなると二列ずつが一列になるので
二列固定になるようにするにはどうすれば宜しいでしょうか？

適応しているcssファイルに下記のスタイルを加えることで、二列に固定させることができます。

@media screen and (max-width: 380px) {
    .newItem ul li {
        width: 45%
    }
}

こちらのスタイルは、画面のサイズが380px以下になった時に、
タグの横幅を45%にするというものです。
私の方で試したところ横幅は45%がちょうど良いと感じたのですが、
こちらの値は適当なものにご変更くださいませ。
よろしくお願い致します。