联系表格 7 上的移动响应栏

Question

我是新来的。

我制作的表格有问题，我需要它在手机版本中将字段一个放在另一个下面，但它们彼此相邻，我该如何实现这种情况？

这是我正在编辑的网站：

https://netcredbrasil.com.br/pre-cadastro-de-parceria/

我尝试在CSS中使用break inside，但它不起作用

Answer 1

好的，当您创建新的 CF7 表单时，它有一个名称和一个电子邮件字段。表单的默认源代码如下所示：

<label> Your name
    [text* your-name autocomplete:name] </label>

<label> Your email
    [email* your-email autocomplete:email] </label>

...

要使它们具有响应能力，以便它们在宽屏幕上并排显示并在窄屏幕上垂直堆叠，请首先添加一个带有类的包装器

div

：

<div class="responsive">

  <label> Your name
      [text* your-name autocomplete:name] </label>

  <label> Your email
      [email* your-email autocomplete:email] </label>

</div>

...

然后添加一些带有媒体查询的 CSS 规则以实现响应行为，使用网格并改变列数。

.responsive {
  display: grid;
  grid-template-columns: auto; /* one column */
  gap: 0 5vw;
}

@media (min-width: 500px) {
  .responsive {
    grid-template-columns: 1fr 1fr; /* two columns */
  }
}