ShopifyやEコマースに関連することを話してみよう
無料テーマ:Brooklyn(ブルックリン)を使ってストア構築をしています。
HTMLのカスタムについて質問があります。
モバイル表示をした際、添付写真のように文字が切れてしまいます。
横にスライドすれば読めますが、パッと見で全文読めるようにしたいです。
※パソコンでは一行におさまっています。
段落を変えて文章を全文表示するにはどのようにしたら良いでしょうか?
現在このように入れています↓
<div style="width:745px;text-align: center; margin: 0 auto;">ようこそ!わたしたちは「かぞくのじかんを彩る」をテーマにアイテムをそろえています♪</div>
宜しくお願いします。
解決済! ベストソリューションを見る。
成功
現在のソースコードの状態だと、段落の横幅を絶対値で「幅745pxにする」という指定になっているので、たいていのモバイル画面だとはみ出してしまうことになります。
前後のソースコードの状態にもよりますが、下記のいずれかの状態に修正していただくと、
モバイル画面幅に合わせた表示になるかと思いますので、お試しください。
▼幅を相対値指定(width:100%)に変更
<div style="width:100%;text-align: center; margin: 0 auto;">ようこそ!わたしたちは「かぞくのじかんを彩る」をテーマにアイテムをそろえています♪</div>
▼幅指定自体を削除
<div style="text-align: center; margin: 0 auto;">ようこそ!わたしたちは「かぞくのじかんを彩る」をテーマにアイテムをそろえています♪</div>
成功
現在のソースコードの状態だと、段落の横幅を絶対値で「幅745pxにする」という指定になっているので、たいていのモバイル画面だとはみ出してしまうことになります。
前後のソースコードの状態にもよりますが、下記のいずれかの状態に修正していただくと、
モバイル画面幅に合わせた表示になるかと思いますので、お試しください。
▼幅を相対値指定(width:100%)に変更
<div style="width:100%;text-align: center; margin: 0 auto;">ようこそ!わたしたちは「かぞくのじかんを彩る」をテーマにアイテムをそろえています♪</div>
▼幅指定自体を削除
<div style="text-align: center; margin: 0 auto;">ようこそ!わたしたちは「かぞくのじかんを彩る」をテーマにアイテムをそろえています♪</div>
ご丁寧にありがとうございます!
1つめのようになおしたところ、うまく行きました!
感謝いたします。