html - CSS - 响应问题

Question

我会尽量简化这个过程。您可以在 http://www.insidemarketblog.com 查看问题(你可以看到调整大小的问题)

当您调整页面大小时使侧边栏元素移到底部(侧边栏一移到底部)，您会注意到带有蓝色标题“发展您的业务”的电子邮件表单 float 到右侧，不会调整到 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 代码的最佳尝试(但这可能不完整，因为它是响应式 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%;
    }
}