Liquid、JavaScriptなどに関する質問
debutテンプレートでオーバーレイテキスト付き画像を複数縦に並べて使用し、デスクトップ表示の際、画像の横幅を超えてウィンドウを広げると画像の縦方向が切れてしまいます。
画像アライメント:中央
レイアウト:全幅
モバイル表示は問題ないのですが、デスクトップ表示の場合、横幅を想定することが難しいため、縦方向が切れないように横幅の最大値を設定方法を探しています。
CSSでページの横幅の制限値を決める方法でもいいのですが、こちらをtheme.cssの編集などでできれば、そちらでも問題ございません。
ご教授いただけると大変幸いです。
解決済! ベストソリューションを見る。
成功
レイアウト:全幅
のまま最大幅を決めたいということでしたら、
assets/theme.css の(デフォルトだと5790行目あたりの) .hero に対して
max-widthの記載を追加すれば大丈夫かと思います。
それよりも簡単なのは、セクションの設定を
レイアウト:固定幅
にすればcssを編集せずとも固定幅になります。
「テキストオーバーレイ付き画像」の背景画像が指定されているdivに対して、
max-width: 1920px; などで最大幅を追加で指定してはいかがでしょうか。
その場合左寄せになってしまうため、margin: 0 auto; などで中央寄せにしてみてください。
成功
レイアウト:全幅
のまま最大幅を決めたいということでしたら、
assets/theme.css の(デフォルトだと5790行目あたりの) .hero に対して
max-widthの記載を追加すれば大丈夫かと思います。
それよりも簡単なのは、セクションの設定を
レイアウト:固定幅
にすればcssを編集せずとも固定幅になります。
返信が遅くなり失礼しました!
おかげさまで解決できました。
画像を固定幅にしなかった理由は画像と画像の間に縦に空白が入ってしまうからです。
画像を主にしたページをつくりたい方にこの情報は役立つのではないかと思います!
オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024Shopifyパートナーとして活躍している場合、クライアントのためにストア構築や移行を行うことがございます。今回のブログ記事では移行をスムーズに行い、移行後も問題なく運営できるため...
By Mirai Feb 25, 2024Shopifyではチャージバックや不正注文の被害に遭うことが販売社様にとってストレスが多く、困難な状況である事を理解しています。販売社様の中ではチャージバックを存じていない方、不正...
By JapanGuru Feb 12, 2024