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

[scopecoco]

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

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

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

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

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

[jizo]

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

     

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

[scopecoco]

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

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

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

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

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

[jizo · Accepted solution]

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

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

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

[scopecoco]

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

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

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

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