debutテンプレートで オーバーレイテキスト付き画像の横サイズ最大値を決める方法(デスクトップ表示)

[m_takahashi]

debutテンプレートでオーバーレイテキスト付き画像を複数縦に並べて使用し、デスクトップ表示の際、画像の横幅を超えてウィンドウを広げると画像の縦方向が切れてしまいます。

画像アライメント:中央

レイアウト：全幅

モバイル表示は問題ないのですが、デスクトップ表示の場合、横幅を想定することが難しいため、縦方向が切れないように横幅の最大値を設定方法を探しています。

CSSでページの横幅の制限値を決める方法でもいいのですが、こちらをtheme.cssの編集などでできれば、そちらでも問題ございません。

ご教授いただけると大変幸いです。

[toooru]

「テキストオーバーレイ付き画像」の背景画像が指定されているdivに対して、
max-width: 1920px; などで最大幅を追加で指定してはいかがでしょうか。

その場合左寄せになってしまうため、margin: 0 auto; などで中央寄せにしてみてください。

[m_takahashi]

返答ありがとうございます。
以下のページの情報を参考にしているのですが
https://webutubutu.com/webdesign/8323#toc_H2-0
https://community.shopify.com/c/Technical-Q-A/Clickable-Slideshow-Debut/td-p/618624

ファーストビューで表示される背景画像の横幅の最大値を設定する場合
「hero.liquid」にmax-widthを記述すればいいのでしょうか？

的はずれな質問になっていたら恐縮です。

[toooru · Accepted solution]

レイアウト：全幅

のまま最大幅を決めたいということでしたら、
assets/theme.css の（デフォルトだと5790行目あたりの） .hero に対して
max-widthの記載を追加すれば大丈夫かと思います。

それよりも簡単なのは、セクションの設定を

レイアウト：固定幅

にすればcssを編集せずとも固定幅になります。

[m_takahashi]

返信が遅くなり失礼しました！

おかげさまで解決できました。

画像を固定幅にしなかった理由は画像と画像の間に縦に空白が入ってしまうからです。

画像を主にしたページをつくりたい方にこの情報は役立つのではないかと思います！