css - ファンキーなレスポンシブ CSS

Question

レスポンシブ CSS に問題があります。画面幅が約 500px になると、ページ全体に緑色の背景が表示されます。

誰かが助けてくれれば幸いです。同じままにしたい.widget-titleから来ていると思います。

http://69.195.124.68/~discowv9/?page_id=7

前もって感謝します。

マット

Answer 1

フロートがクリアされていない場合は、css .widget-area を更新して clear:both; を追加します。446行目

元：

.widget-area {
margin: 0 0 3.3rem;
background-color: #FFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px solid #a5a5a5;
padding: 0 0.857143rem 0 0.857143rem;
width: 20%;
min-width: 195px;
clear: both;
}

Answer 2

.widgetTitle クラスを適用した h3 という要素です。正確には、クイック リンクの見出しの背景です。

ページのサイズを縮小すると、h3 タグは同じ高さにとどまり、有用なリンクが一番下まで押し込まれると、h3 タグはその後ろに大きな緑色の背景の軌跡を残して全体に伸びます。(下にスクロールして、自分の目で確かめてください。)

HTML 構造と CSS を確認し、何が問題なのかを突き止めます。

クラス .widget-area に次のコード行を追加します。

overflow: hidden;

これで問題が解決します。