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

**URL:** <https://community.shopify.com/t/topic/21059>\
**Category:** 技術的なQ＆A\
**Created:** [September 21, 2020, 2:37pm UTC](https://community.shopify.com/t/topic/21059 "2020-09-21T14:37:14Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

Debutテーマのホームページ用スライドショーで、スマホ表示時に矢印とドットの操作パーツが画像に重なってしまう問題が相談された。最初は「ボタン」の意味が通常のCTAボタンと受け取られたが、画像付きの追記で対象がスライド操作UIだと明確になった。

- 対応箇所: `theme.scss.liquid` 内の `slideshow__text-wrap--mobile`
- 提案内容: モバイル向けCSSから `top: -1.1rem;` と負の下マージンを外し、`margin: 0 0 0 7.5%;` に変更する
- 目的: 操作パーツを画像の下に表示し、重なりを避ける

初期状態のDebutでは再現しなかったため、既存のテーマ変更箇所を見直すべきという補足もあった。最終的に、提示されたCSS修正で問題は解消したと報告され、解決済みとなっている。

<div class="post-metadata">

**Author:** ![scopecoco](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@scopecoco](https://community.shopify.com/u/scopecoco)\
**Post date:** [September 21, 2020, 2:37pm UTC](https://community.shopify.com/t/topic/21059/1 "2020-09-21T14:37:14Z")

</div>

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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [September 21, 2020, 4:21pm UTC](https://community.shopify.com/t/topic/21059/2 "2020-09-21T16:21:01Z")

</div>

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

 ![スクリーンショット 2020-09-22 1.03.15.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/6/4/64fc40179d0663886ca937a5da5defa5f064bcd2.png)

 ![スクリーンショット 2020-09-22 1.03.30.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/4/4/444278e6b530b736023476f184ced6db9ad61402.png)

 ![スクリーンショット 2020-09-22 1.15.54.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/d/8de5c5670712154a04ad46e33974b443e77298fc.png)

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

---

<div class="post-metadata">

**Author:** ![scopecoco](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@scopecoco](https://community.shopify.com/u/scopecoco)\
**Post date:** [September 21, 2020, 5:34pm UTC](https://community.shopify.com/t/topic/21059/3 "2020-09-21T17:34:27Z")

</div>

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

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

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

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

 ![scopecoco_0-1600709460229.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/d/3/4/d3445abde2f90eed87f44f089e2da98b9008f009.png)

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

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [September 22, 2020, 1:38am UTC](https://community.shopify.com/t/topic/21059/4 "2020-09-22T01:38:27Z")

</div>

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

方法はいくつか考えられますが、theme.scss.liquidで作業を行うならば、「slideshow\_\_text-wrap–mobile」で検索して場所を特定し、以下を

```css
.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%;
  }
}

```

以下のように変更することで恐らくご希望の状態になるかと思います。

```css
.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%;
  }
}

```

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

---

<div class="post-metadata">

**Author:** ![scopecoco](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@scopecoco](https://community.shopify.com/u/scopecoco)\
**Post date:** [September 22, 2020, 3:35am UTC](https://community.shopify.com/t/topic/21059/5 "2020-09-22T03:35:56Z")

</div>

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

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

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

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