一部商品ページの画像に余白ができてしまう

AI-generated summary

問題: 一部の商品ページでサムネイル画像に不要な余白が発生。スマホ表示のみで発生し、商品によって余白の幅が異なる。

原因の特定:

  • 質問者は当初、全画像が同じサイズと回答
  • 回答者が具体的な商品ページを確認した結果、レビューのスクリーンショット画像が他より縦に長いことを発見
  • 画像の高さが最も長い画像に合わせられるため、他の画像に上下余白が生じていた

解決:

  • 該当する縦長画像を削除することで問題解決
  • 質問者は他の該当商品ページも見直す予定

状態: 解決済み

一部の商品ページのサムネイル画像部分に、赤枠で囲った要らない余白ができてしまいます。

余白のできてしまっている商品とできていない商品、余白の幅が広い商品と少しだけ余白のできてしまっている商品があります。

原因が分かりません。

不要な余白を無くす方法が分かりましたら

ぜひ教えていただきたいです。

質問拝見しました。

こちらの件に関して、画像のサイズは全て同じでしょうか。

もしくはその商品による何か違いなどはありますでしょうか?

いただいている情報だけでは特定が難しいのでよろしければプレビューリンクと商品名を教えていただけましたら何かわかるかもしれないので共有板だ変えますと幸いです。

ご確認よろしくお願いいたします!

ご返信くださり有難うございます!

画像サイズは全て同じです。また、スマホで見た場合のみ余白があります。

<例>
https://roloshop-official.com/products/r118
スティックパールピアス
https://roloshop-official.com/products/r109
CZ 4mmスタッドピアス

「スティックパールピアス」の商品画像にお客様のレビューのスクリーンショットが貼られていて、その画像だけ他の画像より縦に長いようです。その画像に高さを合わせているため、他の画像では上下に余白ができていると思われます。

ご返信くださり有難うございます。

該当画像部分を削除したところ、スマホ画面の状態が元に戻りました。

先のご質問回答に画像サイズは同じと返してしまいましたが、気が付きませんでした。

他の該当商品ページも見直してみます。
この度は大変助かりました。本当に有難うございます。