• 文字サイズ


解決済

Qoo10 スマートフォン商品ページに罫線を入れたい

  • 相談者:非公開
  • 2022/02/08 13:40
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>
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2022/02/08 13:51
ECマスターズの三輪です。

いただいたご質問ですが、確認いたしますので、
恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします………(省略)………
  • 返信者:非公開
  • 2022/02/08 15:26
ECマスターズの田中です。

私にて確認したところ、
確かにHTMLの改変も一部確認されましたが、
直接の原因は、ページ内に設置された別のスタイルシート………(省略)………
このフォーラムへの質問は終了しました