パソコンとタブレットの表示の違いについて

Question

お世話になります。
indexのパソコンとタブレットの表示の違いについて質問させて頂きます。
PCとスマホの表示には問題がなかったのですが、ipadで表示をするとindexの（News）表示がおかしくなります。

文字数の問題だと思うのですが、PCとスマホ、タブレットで統一してキレイに納める方法はありますでしょうか。

Answer

ECマスターズの土屋です。

>文字数の問題だと思うのですが、PCとスマホ、
>タブレットで統一してキレイに納める方法はありますでしょうか。

事務局側でipadのNewsコンテンツ
確認させて頂きました所、目立った
表示崩れが見当たりませんでした。

大変お手数ですが、上手く表示出来ていない
箇所のキャプチャを送って頂く事は可能でしょうか

どうぞよろしくお願いします。

Answer

楽天店は文字数調整をしているので現在はきれいに表示されています。Yahoo店が文字数調整していない画面になります。よろしくお願い致します。###HR######………（省略）………
ログインして全文を読む

Answer

ECマスターズの土屋です。

>楽天店は文字数調整をしているので
>現在はきれいに表示されています。
>Yahoo店が文字数調整していない画面になります。
>よろしくお願い致します。

キャプチャ画像誠にありがとうございます。

確認させて頂きました所、親要素の幅(700px)を
文字列が超えてしまいますとレイアウトが
崩れる原因となってしまいますので
対策としましては、テキストを囲むwidthの指定が
必要になります。

事務局側でソースコードを用意させて頂きましたので
こちらをお試しいただけますと幸いです。

どうぞよろしくお願いします。


.right_cont .right_main_wrap .news_time_txt {
    width: 7em;
}
.right_cont .right_main_wrap .news_info_txt {
    width: calc(100% - 7em - 20px);
}

Answer

お世話になります。
お陰様で楽天店とYahoo店はきれいに表示されるようになりました。
本店（Makeshop）ではPCのindexでも添付画像のように２行になってしまいます。
理想としては楽天店、Yahoo店のPCindexのように表示されるようにしたいのですが何か方法はございますでしょうか。###HR######IMG0fbe0b6c9fd3b834a029a8cbd4bd64f1b.jpegIMG0###

Answer

ECマスターズの伊藤です。

> 本店（Makeshop）ではPCのindexでも添付画像のように２行になってしまいます。
> 理想としては楽天店、Yahoo店のPCindexのように表示されるようにしたいのですが何か方法はございますでしょうか。

実際のコードを確認させていただきたいので、
URLをご教示いただけますでしょうか。

Answer

https://www.select-penguin.co.jp/

こちらになります。
現在は教えて頂いたソースコードを入れておりません。
よろしくお願い致します。

Answer

ECマスターズの伊藤です。

> 現在は教えて頂いたソースコードを入れておりません。

URLのご連絡ありがとうございました。

確認したところ、
日付とアイコンの間の余白が、
楽天、Yahooと異なっていましたので、
その部分のみ修正いただければ、
ご対応可能となります。

下記のコードが修正したコードになりますので、
こちらをご利用くださいませ。


.right_cont .right_main_wrap .news_time_txt {
width: 7em;
}
.right_cont .right_main_wrap .news_info_txt {
width: calc(100% - 7em - 27px);
}



また、誤って別のフォーラムの返信が
投稿されておりましたため、
先程、削除致しました。
ご迷惑おかけして申し訳ございませんでした。