CSS Форма Контакта - 2 Столбцы в Wordpress

У меня есть небольшая проблема на my website. Я использую форму контакта 7 на установке Wordpress с огромным количеством настроек CSS. В Интернете это нормально, но на мобильном поле электронной почты слишком мало. Мне нужно, чтобы кнопка отправки не была равна ширине поля электронной почты.CSS Форма Контакта - 2 Столбцы в Wordpress

Может ли кто-нибудь работать на этом 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; 
}

источник

2016-06-21 David West

@media (max-width:580px) { 

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

}

Это следующий фрагмент кода будет сделать поле EMAIL и кнопку Submit друг под другом.

источник

2016-06-21 20:58:11

Хотя это не то, что я искал, это работает и, вероятно, более просто для пользователей, чтобы увидеть их всю электронную почту. Но это заставляет его выглядеть немного не синхронизированным. Чтобы справиться с этим, могу ли я сосредоточить текст проверки для этого блока максимальной ширины? –

Да, вы можете это сделать. Если мой код вам помог, можете ли вы пометить его как полностью? –

CSS Форма Контакта - 2 Столбцы в Wordpress

ответ

Смежные вопросы