ここから本文です

cmsの「soy shop」にてホームページを構築しているのですが(閲覧される画面のサイ...

vette8771さん

2017/1/1716:05:08

cmsの「soy shop」にてホームページを構築しているのですが(閲覧される画面のサイズによって、cssによりデザインを変更する形)、下記のページをスマホより閲覧した際に、

二段目の商品が二列に並ばずスタイルが崩れてしまいます。商品名が改行されることにより崩れるようなので、cssをいろいろと改変してみましたがうまくいきません。どのようにすれば二段目以降もきちんと表示できるか、ご教示下さい。よろしくお願いします。

http://kashidokoro-tobita.com/item/list/category-2.html


商品一覧に関連するcssは、以下の通りです。

/* item_list
-----------------------------------------------*/
.item_list{
display:inline-block;
max-width:100%;
}
.item_list article{
display:block;
width:48%;
height:auto;
float:left;
position:static;
margin:0;
padding:0;
}
.item_list article img{
max-width:100%;
height:auto;
-webkit-box-shadow: 1px 2px 5px #CCC;
-moz-box-shadow: 1px 2px 5px #CCC;
box-shadow: 1px 2px 5px #CCC;
}
.item_list article a:hover img{
opacity: 1;
filter:item_list article(opacity=100);
-ms-filter:"item_list article(opacity=100)";
}
.item_list article h1{
background:none;
padding:0;
margin-bottom:0;
border:none;
box-shadow:none;
}
.item_list article a h1{
color:#333;
}
#recommended_items .item_list article:nth-child(2n),
#new_items .item_list article:nth-child(2n),
#items .item_list article:nth-child(2n),
.items .item_list article:nth-child(2n){
width:48%;
margin-left:4%;
}
.item_list article p.price{
text-align:center;
margin-bottom:5px;
padding:2px 0;
margin:5px 0;
border-top:1px dotted #ccc;
border-bottom:1px dotted #ccc;
font-size:16px;
}
.item_list article p.text{
margin-bottom:5px;
}
.item_list article p.new{
position:absolute;
top:30px;
left:0;
}
.item_list article p.more{
float:right;
margin-bottom:10px;
width:40%;
height:auto;
}

/* .items
-----------------------------------------------*/
.items .item_list{
display:inline-block;
max-width:100%;
}
.items .item_list article{
display:block;
width:48%;
height:auto;
float:left;
position:static;
margin:0 0 30px 0;
padding:0;
}

閲覧数:
38
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

2017/1/1800:11:35

>vette8771さん
>どのようにすれば二段目以降もきちんと表示できるか、ご教示下さい。よろしくお願いします。

決め打ちで高さを指定するか、CMSを改編するかが楽だと思います。

  • 質問者

    vette8771さん

    2017/01/2015:52:31

    高さ指定で対応できました。ありがとうございました。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。