• 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