追従ボタンの大きさを変えたい | コミュニティ

コミュニティ

追従ボタンの大きさを変えたい

トピックス by widget初心者 1792 pt 2023年10月24日 12:50 253 PV
【相談したいページ】

https://sb-preview.squadbeyond.com/articles/HLpNKjZnrgxLWO-ZQ/preview

【相談内容】

追従ボタンwidgetにレスポンシブ指定してサイズ調整したく、次の記事LPの表示サイズと同じようにしたいです。https://looklook.co.jp/lp/inulin/article/comic.html
widgetマスター 1 年前 2 人 · 1 コメント
- widget
- ボタン
1 コメント

widgetマスター

モデレータ

2023年10月24日 12:51

下記CSSの調整を行ってください！

.footerBtn__content {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto; /* ← 修正 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 追加: ページコンテンツや配信version幅などに合わせて下記「max-width」の数値を調整して下さい */
    max-width: 620px; /*beyondエディタの場合 max-width:620px / 参考サイトの場合 max-width:720px */
 }

 .footerBtn__content .btn {
    width: 100%;　/* ← 修正 */
    height: auto;
    display: block;
    /* height: 100px;  ← こちらは削除して下さい*/
    opacity: 1;
    transition: opacity 0.2s;
    /* 追加 */
    margin: 10px; /* 参考サイトと同じ表示になるために追加して下さい */
}

/* レスポンシブ時（画面サイズ 600px 以下）の設定 */
@media (max-width: 600px) { 
  .footerBtn__content .btn {
    margin: 0; /* 参考サイトと同じ表示になるために追加して下さい */
  }
}

プレビュー：https://sb-draft-preview.squadbeyond.com/articles/xFM-KxoaKwGomwMGkAYg/draft?token=ac99d2dfeca075fd08a79b85b909ea3a