スライドショーのスマホでのボタン表示位置変更

解決済
Highlighted
観光客
3 0 1

テーマ「Debut」を使用しています。超初心者です。

ホームページでスライドショーを採用しています。スマホ表示の際に、スライドボタンが画像に重なって表示されます。

ボタンの位置を下に下げる、画像と重ならないようにするにはどこを編集すれば良いでしょうか。

Theme.css.liquidでそれらしきところを変更したりしてみたのですが、動かすことができませんでした。

おわかりになる方、教えてください。よろしくお願い致します。

0 件の「いいね!」
Highlighted
開拓者
121 38 122

初期状態のDebutで試しましたが、以下のスクリーンショットのように「テキストなしでボタンのみ」の場合、スマホサイズではボタンは画像より下に移動していました。

スクリーンショット 2020-09-22 1.03.15.png

スクリーンショット 2020-09-22 1.03.30.png     スクリーンショット 2020-09-22 1.15.54.png

この点から、直るまで何かしら変更された部分を少しづつ元に戻すか、今のテーマを残したままそれを参考にしながら再度手を加えていくかなどの方法をとられた方がよいかもしれません。

0 件の「いいね!」
Highlighted
観光客
3 0 1

ご確認、ご連絡誠にありがとうございます。

私の単語の使い方に誤りがありました。

「ボタン」ではなく、スライド画像に重なっている、

スライドショーの矢印とドットが表示されているパーツのことです。

scopecoco_0-1600709460229.png

この部分を画像の下に移動させることはできないものでしょうか?

0 件の「いいね!」
Highlighted
開拓者
121 38 122

成功

対象を間違っており申し訳ありません。

方法はいくつか考えられますが、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%;
  }
}

 

 軽く見たところでは大丈夫そうですが、この変更により動作に影響がでないとも限りませんので、作業後は不具合がないかをチェックもお勧めします。

 

2 件の「いいね!」
Highlighted
観光客
3 0 1

質問の際の説明が不足しており申し訳ございませんでした。

教えていただいた方法で解消できました!

早々にご回答いただき感謝いたします。

ありがとうございました!!

1 件の「いいね!」