css - 时髦的响应式 CSS

Question

我的响应式 CSS 有问题。一旦我缩小到大约 500 像素的屏幕宽度，我的整个页面都会出现绿色背景。

如果有人可以提供帮助，我将不胜感激。我认为它来自我想要保持不变的 .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

您的浮动未清除，请通过添加 clear:both; 更新您的 css .widget-area；第 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;
}