画像レイアウトの変更について

Question

https://marianaocean.com
の「OUR PRODUCT」の部分を、スマホで見える時に2カラム表示になるようにしたいのですが、どうすれば宜しいでしょうか？

Accepted Answer

ECマスターズの田辺です。

2423行目の #main .activity li に対して
float が外れてしまっていることで、
２カラムになっておりませんので、
2423行目の #main .activity li のみ
以下のタグにご変更ください。

#main .activity li {
margin-left: 2%;
width: 22%;
float:left;
}

元の記述と全く同じ記述はこちらも控えておりませんが、
上記でPCは４列で表示されます。

念のためまとめると、

2423行目
#main .activity li {
margin-left: 2%;
width: 22%;
float:left;
}

4637行目（メディアクエリの中）
#main .activity li {
margin-left: 2%;
width: 45%;
}

という記述になり、
PCとスマホで表示を変えることができます。

Answer

ECマスターズの田辺です。

common.cssの4637行目で
スマホでは横並びにならないように
設定されておりますので
そちらを以下のように解除していただきますようお願いいたします。

#main .activity li {
margin: 0 0 10px;
width: auto;
float: none;
}

を

#main .activity li {
margin-left: 2%;
width: 45%;
}

にご変更いただき
表示をご確認ください。
※floatの記述は削除していただいて構いません

Answer

ご回答ありがとうございます。

#main .activity li {
margin-left: 2%;
width: 45%;
}
に変更しましたが、表示は変わらないままです。
何か記述に間違いがあるのでしょうか？

Answer

ECマスターズの田辺です。

ページを確認させていただいたところ、
記述の変更が反映されておりませんでした。

再度変更箇所をご確認いただき編集画面では
問題ないようでしたら
カラーミーショップでの更新が
遅れている可能性もございますので
時間がたってから再度ご確認をお願いいたします。

Answer

ロリポップ上でこのように変更はしているのですが(画像参照)、まだ変わらないままです。
システムエラー等でしょうか？###HR######IMG00497ecec11bb2554056ed2e8c4f68177.pngIMG0######BR###

Answer

ECマスターズの田辺です。

こちら側では更新が確認できるようになりました。
キャッシュを読み込んでいる可能性がございますので、

・スーパーリロードを行う
https://liginc.co.jp/web/tool/browser/47339
・ブラウザの設定画面から、キャッシュを削除する

のどちらかをお試しいただき
ページを再度ご確認いただいてもよろしいでしょうか。

また、
2423行目の #main .activity li に対しても
margin-left: 2%;
width: 45%;

に変更されたようですが、
そちらはPC用の設定ですので
元に戻していただきますようお願いいたします。

2423行目にfloatの記述があることで
4637行目のfloatはなくても横並びになる仕組みとなっております。

Answer

URLを参考にして再度強制更新してみましたが、スマホで２カラムにならないようです。
CSSを間違えていじったのか、pc版も縦並びになってしまい、元に戻す方法がわからないのですがご教授いただけますでしょうか？
元のデータをバックアップしておらず、戻す方法がわからなくなりました、、、

Answer

PCでもスマホでも確認ができました！
ご丁寧にありがとうございました。