スマホカテゴリの画像について

Question

大変お世話になっております。

下記ビーバイ様の投稿とおり行いましたが画像がうまく表示されませんでした。
https://forum.ec-masters.net/post_view.php?id=8940

下記をGOLDにアップ

jQuery(document).ready( 
function() {
//画像変更
jQuery('#sCSLContainer').each(
function(){
var txt = jQuery(this).html();
jQuery(this).html(txt.replace(/fitin=90:90/g,"fitin=360:360"));
}
);
})

下記をカテゴリページ共通説明文に


/* a>div {
padding: 0px;
}
div#sCSLContainer .sCSLBox01,div#sCSLContainer .sCSLBox02 {
display: block !important;
background-position: calc(100% - 0px) calc(100% - 12px);
border-bottom: none;
background-color: transparent;
margin-bottom: 16px;
}
#sCSLContainer .txtheight {
min-height: 20px;
margin: 8px 0;
}
#sCSLContainer .txtheight .ctgItemNormal {
line-height: 1.4;
}
#sCSLContainer .txtprice {
text-align: left;
}
#sCSLContainer .inLeft {
width: 48vw !important;
height: 48vw !important;
}
div#sCSLContainer .sCSLBox01 div.inLeft img,div#sCSLContainer .sCSLBox02 div.inLeft img {
max-height: 100% !important;
max-width: 100% !important;
}


この様に記載しましたが、添付画像の様に表示されてしまします。

どこの部分を修正したら枠いっぱいに商品画像が表示されるのでしょうか。

宜しく御願い致します。###HR######IMG08c7182423aaa629e07ae67a8b8823be1.jpegIMG0###

Answer

ECマスターズの伊藤です。

> どこの部分を修正したら枠いっぱいに商品画像が表示されるのでしょうか。

ページを拝見させていただいたところ、JSファイルの読み込みができていないようでした。

スマーフォン用のカテゴリページ共通説明文に


を追加後、改めてご確認いただきますよう、お願いいたします。

Answer

伊藤様

大変お世話になっております。

うまく表示する事ができました。

ありがとうございます。

Answer

解決済みにしましたが、もう一つ教えて頂ければと思います。

添付画像の様に画像は大きく表示できましたが、全体的に左に寄ってしまいます。

改善する方法を教えて頂けると幸いです。###HR######IMG0fb54a5d4a88094a3ea5b234a79c1d2c0.jpegIMG0######BR###

Answer

ECマスターズの伊藤です。


> 添付画像の様に画像は大きく表示できましたが、全体的に左に寄ってしまいます。

> 改善する方法を教えて頂けると幸いです。


カテゴリページ共通説明文に追加頂いておりました
CSSが原因で、左によってしまっていました。
お手数ですが、下記の通り修正していただきますよう
お願いいたします。

＝＝＝＝＝修正前＝＝＝＝＝
#sCSLContainer .inLeft {
width: 48vw !important;
height: 48vw !important;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝修正後＝＝＝＝＝
#sCSLContainer .inLeft{
width: 48vw !important;
height: 48vw !important;
margin: 1vw;
box-sizing: border-box;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝


＝＝＝＝＝修正前＝＝＝＝＝
div#sCSLContainer {
display: flex;
flex-wrap: wrap;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝修正後＝＝＝＝＝
div#sCSLContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝

Answer

伊藤様
大変お世話になっております。

ありがとうございます。

助かりました。

Answer

ECマスターズの伊藤です。

無事、ご希望のレウアウトにしていただけたようで安心いたしました。

また、なにかございました、ご質問くださいませ。