时髦的响应式CSS

Question

我的响应式CSS有问题。一旦我达到大约500px的屏幕宽度，我就会在整个页面上显示绿色背景。

如果有人可以提供帮助，我会很感激。我认为它来自我的.widget-title，我希望保持不变。

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

提前致谢。

马特

Answer 1

这是一个名为h3的元素，应用了.widgetTitle类。确切地说，它是快速链接的标题背景。

当您缩小页面大小时，h3标签保持在相同的高度，当有用的链接一直推到底部时，h3标签一直延伸到它后面留下一条绿色的大背景痕迹。 （向下滚动并亲自查看。）

我会检查你的HTML结构和CSS，看看我是否能弄清楚它有什么问题。

在你的班级.widget-area中添加以下代码：

overflow: hidden;

这将解决您的问题。

Answer 2

你的漂浮物没有清除， 更新你的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;
}