CSS 联系表单自定义 - Wordpress 中的 2 列

Question

我在my website 上有一个小问题。我在 Wordpress 安装中使用 Contact Form 7，并进行了大量的 CSS 自定义。在网络上，这很好，但在移动设备上，电子邮件字段太小了。我需要提交按钮与电子邮件字段的宽度不相等。

有没有人能够在这个 CSS 上发挥他们的魔力，使 emailField 填充大约 70% 的容器和提交按钮 30%？提前谢谢...

::-webkit-input-placeholder { /* WebKit browsers */
   text-align: center;
   text-transform: uppercase;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
   font-weight: 600;
   opacity: 0.8;
   color: #a21cea !important;
   }

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   text-align: center;
   text-transform: uppercase;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
   font-weight: 600;
   opacity: 0.8;
   color: #a21cea !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   text-align: center;
   text-transform: uppercase;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
   font-weight: 600;
   color: #a21cea !important;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   text-align: center;
   text-transform: uppercase;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
   font-weight: 600;
   opacity: 0.8;
   color: #a21cea !important;
}
.wpcf7-inline-wrapper .wpcf7-inline-field input:not([type="submit"]), .wpcf7-inline-wrapper .wpcf7-inline-field input::-webkit-input-placeholder {
 color: #a21cea !important;
}
.wpcf7-inline-wrapper .wpcf7-inline-field input:not([type="submit"]), .wpcf7-inline-wrapper .wpcf7-inline-field input::-moz-placeholder {
 color: #a21cea !important;
}
.wpcf7-inline-wrapper .wpcf7-inline-field input:not([type="submit"]), .wpcf7-inline-wrapper .wpcf7-inline-field input:-ms-input-placeholder {
 color: #a21cea !important;
}

.wpcf7-text, .wpcf7-form textarea {
   -moz-border-radius: 30px;
   -webkit-border-radius: 30px;
   margin-left: 0px;
   border-width: 0px;
   border-radius: 30px 30px 30px 30px;
   width: 100%;
   text-align: center;
   text-transform: uppercase;
   font-family: "Poppins", sans-serif;
   font-weight: 600;
   font-size: 12px;
   height: 45px;
   color: #a21cea !important;
   background-color: #fff !important;
   opacity: 0.9;
}



.wpcf7 input[type="submit"] {
    height: 45px;
   -moz-border-radius: 30px;
   -webkit-border-radius: 30px;
   border-radius: 30px 30px 30px 30px;
   border-color: #fff !important;
   border-color: #fff !important;
   color: #fff !important;
   background:none !important;
}

.wpcf7 input[type="submit"]:hover{
    height: 45px;
   -moz-border-radius: 30px;
   -webkit-border-radius: 30px;
   border-radius: 30px 30px 30px 30px;
   color: #a21cea !important;
   border-color: #fff !important;
   background-color: #fff !important;
   background: white !important;
}


.wpcf7 input[type="submit"]:focus{
    height: 45px !important;
   -moz-border-radius: 30px !important;
   -webkit-border-radius: 30px !important;
   border-radius: 30px 30px 30px 30px !important;
   color: #fff !important;
   border-color: #fff !important;
}

.home .btn-accent:not(.btn-focus-nobg):not(.btn-text-skin):focus {
    color: #ffffff !important;
}
.home .btn-accent:not(.btn-hover-nobg):not(.btn-text-skin):hover {
    color: #a21cea !important;
}
.wpcf7-not-valid-tip
{
   font-family: "Poppins", sans-serif;
   font-weight: 600;
   font-size: 14px;
   color: #fff !important;
}
.wpcf7-response-output
{
   font-family: "Poppins", sans-serif;
   font-weight: 600;
   font-size: 14px;
   color: #fff !important;
}
.wpcf7 .wpcf7-response-output
{
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   color: white !important;
}

.wpcf7-mail-sent-ok
{
   font-family: "Poppins", sans-serif;
   font-weight: 600;
   font-size: 14px;
   color: #fff !important;
}

Answer 1

@media (max-width:580px) {

.wpcf7-inline-wrapper.wpcf7-newsletter p:nth-child(2) {
    width: 100%;
    margin:10px!important;
}

}

下面这段代码将使 EMAIL 字段和 SUBMIT 按钮位于彼此下方。