[ 解決済 ] トップページスライドショーのボタンのcssについて

[suzukiakiyo]

■ 利用テーマとバージョン :
lightningpro 8.1.0

■ 質問内容：
.slide-text-set .container .btn

こちらのボタンを、位置中央で設定しています。

cssでmargin-bottom:-480pxのあたりにボタンを配置して、プレビューで見るといい感じに配置されています。
しかしモバイル版でみるとボタンが見えなくなっています。
どのように設定したらよいのでしょうか？
そもそもmargin-bottom:-480pxという書き方も合っているのか不安なので、併せて教えていただければ幸いです。

[うなこ]

スライドショーのタイトルとキャプションが入っていない状態でしょうか？
キャプチャ画像があると正確にお伝えできるかなと思います。

[suzukiakiyo]

添付ファイルのような状態です。
スライドショーのタイトルとキャプションは入っておらず、画像のみです。
よろしくお願いします。

Attachments:

You must be logged in to view attached files.

[うなこ]

以下のcssでどうでしょうか？
bottom:10px;はお好きな数字にしてみてください

.slide-text-set{
top:unset;
bottom:10px;
}

[suzukiakiyo]

ありがとうございます。
pc上はいい感じになりました。
スマホだと若干ボタンが上に位置してきてしまうのですが、これはどうにかなりますか？

[うなこ]

スマホサイズ用に別で追加します。
○○の中はお好きな数値に変えてください。いかがでしょうか

/* 576pxまでの幅の場合に適応される */
@media screen and (max-width: 576px){
.slide-text-set{
bottom:○○px;
}
}

[suzukiakiyo]

ありがとうございます。
cssを設定してみました。
レスポンシブで確認すると若干ボタンが上にあがってくるような感じになります。

例えば、bottom:5px;　で固定するといったようなことが必要になってくるのでしょうか？

[うなこ]

例えば、bottom:5px;　で固定するといったようなことが必要になってくるのでしょうか？

実際の画像が設置してあるサイトを見てみないとわかりませんが、
スマホサイズでボタン位置を変えたいということであれば、先ほど追記したスマホサイズのメディアクエリを追加で書いていただく必要があります。

[suzukiakiyo]

スマホ上でボタンの位置は変えたくはありません。
ただPC上で画面を縮めた時に、ボタンの位置が上に動いたような感じになったので聞いてみました。
位置を動かしたくないので、教えていただいたcssのままで良いですよね。

[うなこ]

添付画像を確認しますと、上に画像で文字などが記載されているようでしたので、
スマホサイズでボタンの位置がおかしくなければ、そのままでいいかなと思います。

[suzukiakiyo]

かしこまりました。
ありがとうございます。

[投稿者]

投稿