スマホ商品説明文内、複数画像配置した際の高さのずれの修正方法

Question

以下の様なリンク付きのリンク付き複数画像（2列×1～2行）をスマホ商品説明文内に配置しておりますが、表示すると左右で高さのずれが生じてしまいます。恐れ入りますが、このずれを修正する方法をご教示頂けますでしょうか？

Accepted Answer

ECマスターズの田中です。該当部分のソースを確認したところ、ところどころに &nbsp; が含まれていることがわかりました。&nbsp; は、スペースを表示させるための文字参照の一つで、これが片方にだけ含まれていることが原因で高さが均等でなくなりズレが発生しておりますので、削除をお願いいたします。

Answer

ECマスターズの田中です。同じサイズを指定していても、スマートフォンのページの枠にブラウザが調整しようとして高さの差が出ている可能性があります。スマートフォンは、機種によって横幅が異なり、固定値（◯◯px）で指定すると、はみだしたり、余白ができる原因となりますので、設置されている画像が、たとえば全て正方形など、高さと横幅の比率が全て等しいのであれば、横幅だけをパーセンテージでご設定いただくことをオススメいたします。なお、横幅のパーセンテージは、親要素の横幅に対する割合を意味しますので、たとえば横2列であれば、は50%、その中のは100%とご指定ください。

これでも解決しない場合は、お手数をおかけしますが実際に商品ページに設置していただき、設置した商品ページの商品管理番号をお知らせいただけますでしょうか。私にて確認を行わせていただきます。フォーラムで回答しづらい場合は、リクエストフォームよりご連絡ください。

Answer

お忙しい中、ご回答を戴きありがとうございます。修正をしましたたが、やり方が間違っているのか表示は改善されませんでした。リクエストフォームより該当のページURLをお送り致しました。恐れ入りますが、ご確認をして戴けますでしょうか？すみません。

Answer

ありがとうございます。ご指摘を戴きました２点を併せて実行し、表示が修正できました。新年早々でお忙しい中、お早いご回答戴き恐縮です。ありがとうございました。

スマホ商品説明文内、複数画像配置した際の高さのずれの修正方法

カテゴリーから探す