楽天スマホ　カテゴリページ（商品一覧ページ）の見せ方について

Question

お世話になります。

下記サイトを参考にスマホのカテゴリページ（商品一覧ページ）を3段にしました。
http://www.cyber-records.co.jp/blog/rakuten/rakuten-attract-customers/rms_sp_technique_02/

しかし当店の商品名の英語半角のものが改行されないため表示がおかしくなってしまいます。
http://item.rakuten.co.jp/店舗名/c/0000000456/

商品名を直せばいいのですが、できれば直さずに表示を整える方法があれば教えていただきたいです。


もしくは、3段ではなく2段にすることも考えました。
ただそうすると画像が粗くなってしまいます。
画像がキレイに表示できれば、2段でもいいと思うのですが、対策はありますでしょうか？

どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。

「categori-2retu.css」にて定義されている
「#sCSLContainer .inRight .ctgItemNormal」への規則に含まれる、
word-wrap: break-word;
を
word-break: break-all;
にご変更いただけますでしょうか。

「word-wrap: break-word;」は、
適用される要素の横幅が、スタイルシート上で確定していないと
機能しないので、
いかなる場合も、単語の途中であっても強制的に改行する
「word-break: break-all;」にご変更いただく、という形になります。

Answer

ありがとうございます。
改行されるようになりました。勉強になります。

まだ高さが一文字分くらい揃わないのですが、これを解決する方法はありますでしょうか。

どうぞよろしくお願いします。

Answer

ECマスターズの田中です。

私にて、いただいたカテゴリページにて
高さが揃っていない様子を確認することができなかったのですが、
具体的にどのように揃っていないかご教示いただけますでしょうか。

ご返信いただきづらい場合は、
画像にモザイクやぼかしを入れて文字を見えなくする、
リクエストフォームをご利用いただくなどのご対応をお願いします。

また、環境を確認させていただきたいので、
実際に高さの不揃いをご確認いただいたブラウザにて
https://aboutmybrowser.com/
上記URLにアクセスしていただき、
表示されるURLをお送りいただけますでしょうか。

Answer

お手数をおかけします。

環境
https://aboutmybrowser.com/N8YGkDC_

3台のスマホのうちの1台でしたので、あまりきにしなくてもいいのかもしれません。

もし分かれば教えてください。###HR######IMG0bab24517a8873a3cbd49799dd91cbe0a.pngIMG0######BR###

Answer

ECマスターズの田中です。

URLをお伝えいただき、
また画像を作成いただきありがとうございます。

確かに、7行になっているところがありますね。

#sCSLContainer .inRight .ctgItemNormal
にて、line-heightが15pxと決められておりますので、
height: 100%;
を、
height: 90px;
に設定していただくと、
必ず６行表示となります。
一度、ご変更いただき、表示をご確認いただければと思います。

Answer

教えて頂いた方法で、表示が整いました。
いつも助かります。
ありがとうございます。

楽天スマホ カテゴリページ（商品一覧ページ）の見せ方について

楽天スマホ　カテゴリページ（商品一覧ページ）の見せ方について