1

テスト用のランディング ページを作成し、サインアップに Gravity Form を使用しています。完了後にフォームのサイズが自動的に変更されると (確認メッセージ用のスペースが空くだけです)、その下の要素が押し上げられてレイアウトが崩れてしまうという問題があります。簡単な解決策だと確信していますが、見つけられないようです。コード構造:

<h3 style="line-height: 15px;">SOME TEXT</h3>
<h3>MORE TEXT</h3>
<h3 style="line-height: 15px;">MORE TEXT</h3>
<h4>MORE TEXT</h4>
<img class="alignnone size-full wp-image-492" style="position: absolute; top: 430px; left: 80px;" src="image.png"width="350" height="202" /></a>
<div style="width: 40%; 
            background-color: #ffce32; 
            border: 3px solid #8E0F0F; 
            position: relative; bottom: 180px; left: 610px; 
            padding: 10px; border-radius:20px;">[my gravity form]</div>

<div style="position: relative; bottom: 160px;">
    <h4 style="text-align: center;">TEXT</h4>
    <img>
    <h4 style="text-align: center;">TEXT</h4>
    <div class="my_gallery" style="margin-left: 110px;"></div>
    <h4 style="text-align: center;">TEXT</h4>
    <p>TEXT</p>
    <h4 style="text-align: center;">TEXT</h4>
</div>

問題は、フォームのすぐ下にある div が押し上げられ、フォームが縮小したときにレイアウトが壊れることです。

4

1 に答える 1