CSS - 响应问题

Question

我会尝试尽可能简单。你可以在http://www.insidemarketblog.com看到问题（你可以看到调整大小的问题）

当您调整页面大小以使侧边栏元素移到底部时（侧边栏会一直显示到底部），您会注意到带有蓝色标题的电子邮件表单“向您的业务增长”浮动到右侧不会调整为100％。如何修复它以向左浮动并调整为100％？

以下是代码：

HTML：

<div id="text-2" class="widget widget_text" style="">
<p class="widget_title">Grow Your Business</p>
<div class="textwidget">
<div id="wpcf7-f94-o1" class="wpcf7">
<form class="wpcf7-form" novalidate="novalidate" method="post" action="/#wpcf7-f94-o1">
</div>
</div>
</div>

这是我最好的尝试放置所有相关的CSS代码（但这可能是不完整的b / c它是响应式CSS。

.columns > .sidebar > *:nth-child(2n+2) {
  clear: none;
  float: right;
}
.columns > .sidebar > * {
  width: 240px;
}
.columns > .sidebar > * {
  clear: both;
  float: left;
  width: 46.15%;
}

以下是它的外观截图（以及为什么它显然是错误的）。

Answer 1

将此添加到您的代码中：

@media (max-width: 984px){
    .columns > .sidebar > * {
        clear: both;
        float: left;
        width: 100%;
    }
}

Answer 2

你的CSS说它应该向右浮动，所以它完全符合代码所说的。在您发布的CSS中查看第三行： 您应该在响应式布局中删除#text-3和#text-2的浮点数，它会起作用。