VWSとは フォーラム VK Blocks・Pro [ 解決済 ] トップページスライドショーのボタンのcssについて

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

11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • 投稿者
    投稿
  • #44942

    suzukiakiyo
    参加者

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

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

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

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

    #44944

    うなこ
    モデレーター

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

    #44946

    suzukiakiyo
    参加者

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

    Attachments:
    You must be logged in to view attached files.
    #44949

    うなこ
    モデレーター

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

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

    suzukiakiyo
    参加者

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

    #44966

    うなこ
    モデレーター

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

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

    suzukiakiyo
    参加者

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

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

    #45071

    うなこ
    モデレーター

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

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

    #45086

    suzukiakiyo
    参加者

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

    #45088

    うなこ
    モデレーター

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

    #45096

    suzukiakiyo
    参加者

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

11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • このトピックに返信するにはログインが必要です。