FROM CACHE - jp_header
解決済

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

m_takahashi
観光客
3 0 1

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

画像アライメント:中央

レイアウト:全幅

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

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

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

1 件の受理された解決策
toooru
Shopify Partner
93 52 98

成功

レイアウト:全幅

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

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

レイアウト:固定幅

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

元の投稿で解決策を見る

4件の返信4

toooru
Shopify Partner
93 52 98

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

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

m_takahashi
観光客
3 0 1
返答ありがとうございます。
以下のページの情報を参考にしているのですが
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
Shopify Partner
93 52 98

成功

レイアウト:全幅

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

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

レイアウト:固定幅

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

m_takahashi
観光客
3 0 1

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

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

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

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