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を編集せずとも固定幅になります。
返信が遅くなり失礼しました!
おかげさまで解決できました。
画像を固定幅にしなかった理由は画像と画像の間に縦に空白が入ってしまうからです。
画像を主にしたページをつくりたい方にこの情報は役立つのではないかと思います!
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024