急に追従フッターが利かなくなってしまった。

WordPressで作成したサイトに追従バナーをつけていたのですがある時からスマートフォンから見たときにただのフッターになってしまいましたので修正したいです。
使用テーマ：Lightning
現状：ボタンなどはVK Blockなどを利用しております。古いiphoneやGoogleデベロッパーツールなどでは普通に表示されているのですが、最新のiphoneやAndroidのクロームその他ブラウザでは追従しません。
また、電話番号の方のボタンの色も変わってしまっています。どこでどう変わったのか、いつ変わったのかもわからずお手上げ状態なので有識者の皆様のご指摘、ご教示をお願いしたいです。

該当フッターのHTML

<div  class="floating">
<!-- wp:cover {"url":"https://deai.link/info/wp-content/uploads/2022/05/footer_background.png","id":1496,"dimRatio":50,"minHeight":10,"isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<div class="wp-block-cover alignfull is-light" style="padding-top:1rem;padding-right:3rem;padding-bottom:1rem;padding-left:0px;min-height:10%"><span aria-hidden="true"></span><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","textColor":"white","className":"is-style-vk-heading-plain vk_block-margin-lg\u002d\u002dmargin-top vk_block-margin-0\u002d\u002dmargin-bottom","fontSize":"huge"} -->
<!-- <h4 class="has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom has-white-color has-text-color sp_none">お問い合わせ</h4> -->
<!-- /wp:heading -->

<!-- wp:columns {"className":"vk_block-margin-lg\u002d\u002dmargin-bottom"} -->
<div class="wp-block-columns vk_block-margin-lg--margin-bottom"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"subCaption":"電話でのお問い合わせはこちら","buttonUrl":"tel:0120-880-025","buttonAlign":"block","fontAwesomeIconBefore":"fas fa-phone-square-alt","blockId":"57728212-99c8-40e5-88c1-0024f1e26441"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-block"><a href="tel:0120-880-025" class="btn-f btn-sm1" role="button" aria-pressed="true" rel="noopener"><i class="fas fa-phone-square-alt vk_button_link_before"></i><span class="vk_button_link_txt">0120-880-025</span><p class="vk_button_link_subCaption">24時間365日受付中！</p></a></div>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/button {"subCaption":"お気軽にお問い合わせください","buttonUrl":"/contact/","buttonColor":"custom","buttonColorCustom":"vivid-red","buttonAlign":"block","fontAwesomeIconBefore":"far fa-envelope","blockId":"cd77dba0-8552-4c07-ab1b-bb470f913ed2"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-block"><a href="https://deai.link/info/contact/" class="btn-f btn-sm2" role="button" aria-pressed="true" rel="noopener"><i class="far fa-envelope vk_button_link_before"></i><span class="vk_button_link_txt">お問い合わせ</span><p class="vk_button_link_subCaption">メール相談受付中</p></a></div>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

</div>

該当フッターのCSS（ブレイクポイント640px）

.floating{
	z-index:9999;
	position:fixed;
	bottom:0;
	width:100%;
	height: 10vh;
}
.wp-block-columns {
    display: flex;
    margin-bottom: 1.75em;
    box-sizing: border-box;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    flex-wrap: nowrap!important;
}
.vk_button .vk_button_link.btn, .editor-styles-wrapper .vk_button .vk_button_link.btn {
    padding: 0.2em 0.5rem;
    user-select: text;
    text-decoration: none;
    font-size: calc( var(--vk-size-text) * 1 );
}
.vk_button, .editor-styles-wrapper .vk_button {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 5px;
    text-align: center;
}
 .sp {
        display: inline-block;/* 消していたスマホ用のバナーを表示させる */
        width: 100vw;/* スマホの画面幅いっぱいにバナーを表示 */
    }

}

何卒ご教示のほどよろしくお願いいたします。
回答にあたって何かほかにも情報が必要な場合、お気兼ねなくおっしゃっていただければと思います。
よろしくお願いいたします。

CHERRY

2022/07/07 22:50

> 古いiphoneやGoogleデベロッパーツールなどでは普通に表示されているのですが、最新のiphoneやAndroidのクロームその他ブラウザでは追従しません。追従するというのはどのような動きが正しいのでしょうか。 > また、電話番号の方のボタンの色も変わってしまっています。色が変わるというのは、どのような色が正しくて、どの色が間違っているのでしょうか。正しい状態と問題の状態が具体的に判断できるような記載をお願いします。また、可能でしたら、それぞれの状態の画面キャプチャー等を添付するとわかりやすいと思うのですが添付ことはできないでしょうか。