Liquid、JavaScriptなどに関する質問
テーマ「Debut」を使用しています。超初心者です。
ホームページでスライドショーを採用しています。スマホ表示の際に、スライドボタンが画像に重なって表示されます。
ボタンの位置を下に下げる、画像と重ならないようにするにはどこを編集すれば良いでしょうか。
Theme.css.liquidでそれらしきところを変更したりしてみたのですが、動かすことができませんでした。
おわかりになる方、教えてください。よろしくお願い致します。
解決済! ベストソリューションを見る。
成功
対象を間違っており申し訳ありません。
方法はいくつか考えられますが、theme.scss.liquidで作業を行うならば、「slideshow__text-wrap--mobile」で検索して場所を特定し、以下を
.slideshow__text-wrap--mobile {
display: none;
@include media-query($small) {
display: block;
position: relative;
top: -1.1rem;
background-color: $color-bg;
width: 85%;
margin: 0 0 -1.1rem 7.5%;
}
}
以下のように変更することで恐らくご希望の状態になるかと思います。
.slideshow__text-wrap--mobile {
display: none;
@include media-query($small) {
display: block;
position: relative;
background-color: $color-bg;
width: 85%;
margin: 0 0 0 7.5%;
}
}
軽く見たところでは大丈夫そうですが、この変更により動作に影響がでないとも限りませんので、作業後は不具合がないかをチェックもお勧めします。
初期状態のDebutで試しましたが、以下のスクリーンショットのように「テキストなしでボタンのみ」の場合、スマホサイズではボタンは画像より下に移動していました。
この点から、直るまで何かしら変更された部分を少しづつ元に戻すか、今のテーマを残したままそれを参考にしながら再度手を加えていくかなどの方法をとられた方がよいかもしれません。
ご確認、ご連絡誠にありがとうございます。
私の単語の使い方に誤りがありました。
「ボタン」ではなく、スライド画像に重なっている、
スライドショーの矢印とドットが表示されているパーツのことです。
この部分を画像の下に移動させることはできないものでしょうか?
成功
対象を間違っており申し訳ありません。
方法はいくつか考えられますが、theme.scss.liquidで作業を行うならば、「slideshow__text-wrap--mobile」で検索して場所を特定し、以下を
.slideshow__text-wrap--mobile {
display: none;
@include media-query($small) {
display: block;
position: relative;
top: -1.1rem;
background-color: $color-bg;
width: 85%;
margin: 0 0 -1.1rem 7.5%;
}
}
以下のように変更することで恐らくご希望の状態になるかと思います。
.slideshow__text-wrap--mobile {
display: none;
@include media-query($small) {
display: block;
position: relative;
background-color: $color-bg;
width: 85%;
margin: 0 0 0 7.5%;
}
}
軽く見たところでは大丈夫そうですが、この変更により動作に影響がでないとも限りませんので、作業後は不具合がないかをチェックもお勧めします。
質問の際の説明が不足しており申し訳ございませんでした。
教えていただいた方法で解消できました!
早々にご回答いただき感謝いたします。
ありがとうございました!!
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024