QSMの商品ページ編集画面の商品詳細情報に入れた罫線を、スマートフォンに表示したいです。
PCでみると商品詳細情報に入れた罫線が表示されるのですが、スマートフォンだと消えています。
参照していただきたいページ:
https://www.qoo10.jp/g/587958977クロームのデベロッパーツールでソースを確認したのですが、どうやらQoo10のスマホ表示は、こちらの意図せずHTML(CSS)が書き換えられているようです。
入れたい罫線は、PC(HTML)にある
<tr>
<td colspan="3"><hr size="1" width="100%"></td>
</tr>
です。
ご確認よろしくお願いいたします。
参考までにQSMに載せているCSSを以下に記載します。
<style type="text/css">
.f-clr {
clear: both;
}
/*分納*/
.bunnou {
width: 100%;
}
.bunnou img {
height: 51px;
width: 51px;
float: left;
padding-right: 10px;
}
.bunnou p {
font-size: 12px;
color: #666;
display: inline-block;/*画像の横に文字を入れる*/
vertical-align: top;
}
/*PC用商品説明文表*/
.boxt-a {
width: 100%;
background-color: #F2F2F2;
border-collapse: collapse;
}
.boxt-a td, th {
border: 2px solid #FFF;
}
.boxt-a tr:nth-child(1) {
background-color: #D6D6D6;
}
.setumei-td {padding-top: 20px; padding-bottom: 20px; text-align: center;}
/*販売説明文 PC*/
@media (min-width: 640px){
.hanb-img-left {
width: 310px;
float: left;
margin-bottom: 10px;
}
.hanb-img-right {
width: 310px;
float: right;
margin-bottom: 10px;
}
.hanb-img {
width: 640px;
margin: 0px;
}
.table-img {
width: 640px;
margin: 0px;
}
}
/*販売説明文 SP*/
@media (max-width: 639px) {
.hanb-img-left {
width: 100%;
margin-bottom: 10px;
}
.hanb-img-right {
width: 100%;
margin-bottom: 10px;
}
.hanb-img {
width: 100%;
margin: 0px;
}
.table-img {
width: 100%;
margin: 0px;
}
}
</style>