Debutテーマの「テキストオーバーレイ付き画像」をデスクトップで全幅表示した際、ウィンドウ幅を広げると画像の縦方向が切れてしまう問題への対処が相談された内容です。モバイル表示には問題なく、画像の横幅に最大値を設けたいという要望でした。
提示された解決策は次の2点です。
.hero 要素に max-width を追加するmargin: 0 auto; で中央寄せする具体的には、assets/theme.css 内の .hero（初期状態では5790行目付近）に max-width を記述すれば対応可能と案内されました。別案として、セクション設定を「全幅」から「固定幅」に変える方法も示されました。
最終的に質問者は解決済みと報告しています。なお、「固定幅」にしなかった理由として、画像同士の間に縦の空白が入るため、画像中心のページ構成ではCSS編集による対応が適しているという補足がありました。
debutテンプレートでオーバーレイテキスト付き画像を複数縦に並べて使用し、デスクトップ表示の際、画像の横幅を超えてウィンドウを広げると画像の縦方向が切れてしまいます。
画像アライメント:中央
レイアウト：全幅
モバイル表示は問題ないのですが、デスクトップ表示の場合、横幅を想定することが難しいため、縦方向が切れないように横幅の最大値を設定方法を探しています。
CSSでページの横幅の制限値を決める方法でもいいのですが、こちらをtheme.cssの編集などでできれば、そちらでも問題ございません。
ご教授いただけると大変幸いです。
「テキストオーバーレイ付き画像」の背景画像が指定されているdivに対して、
max-width: 1920px; などで最大幅を追加で指定してはいかがでしょうか。
その場合左寄せになってしまうため、margin: 0 auto; などで中央寄せにしてみてください。
返答ありがとうございます。
以下のページの情報を参考にしているのですが
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を記述すればいいのでしょうか？
的はずれな質問になっていたら恐縮です。
レイアウト：全幅
のまま最大幅を決めたいということでしたら、
assets/theme.css の（デフォルトだと5790行目あたりの） .hero に対して
max-widthの記載を追加すれば大丈夫かと思います。
それよりも簡単なのは、セクションの設定を
レイアウト：固定幅
にすればcssを編集せずとも固定幅になります。
返信が遅くなり失礼しました！
おかげさまで解決できました。
画像を固定幅にしなかった理由は画像と画像の間に縦に空白が入ってしまうからです。
画像を主にしたページをつくりたい方にこの情報は役立つのではないかと思います！