floating groupの折りたたみについて

ページ上部に表示しているfloating groupをモバイルサイズの場合だけ非表示にしたいのですが、floating groupにはcollapse this element’s height when hiddenの選択肢がないため、空白が生まれてしまいます。

floating groupの特性上、非表示の際折りたたむのは不可能なのでしょうか?
よろしくお願い致します。

FloatingGroupを400px以下になった場合、非表示にしてみました。
特に空白は発生しなかったのですが、yunsuさんの空白発生個所をスクショで共有いただくことは可能でしょうか。

ちなみに、FloatingGroupはZ-indexが1506に設定されています。
これはZ方向に1506離れていることを意味し、ほかのElementが干渉できないことを意味します。
このことからCallapse when hiddenが設定できないのではないでしょうか。

「いいね!」 1

ご返信ありがとうございます。

イメージとしては、

FloatingGroup A
FloatingGroup B
imege

と縦に並んでおり、幅が狭まると
FloatingGroup A
image

としたかったのですが、実際は
FloatingGroup A
空白
image

となってしまうということでした。
imageを大きめに設定しておき、FloatingGroup Bの方を初めからimageの上に配置しておけばとりあえずは対応できたのですが、それ以外の方法はございますでしょうか?

Floating Group AとFloatingGroupBを縦に並べるためにMargin設定はしていますか?
同じような構成にした時に、FloatingGroupが重なってしまうので、Margin-Topを設定しました。
要素を隠すと同時に設定したMarginを変更してみてはいかがでしょうか。


「いいね!」 1

Margin-Topがうまく設定できていなかったようでした!
助かりました。

いつもありがとうございます。

「いいね!」 1