Я создал форму MailChimp для нижнего колонтитула моего веб-сайта, я немного изменил CSS, чтобы посмотреть, как это происходит сейчас. Я застрял сейчас, когда я прикрепил два изображения, первым из которых является то, как я хочу, чтобы форма выглядела, а вторая - то, как выглядит текущий код.Mailchimp Custom Form CSS
Некоторая помощь, направленная мне в правильном направлении, была бы весьма признательна.
<div class="row">
<div class="mc-field-group col-lg-6">
<label for="mce-FNAME">First Name:<span class="asterisk"></span></label>
<input type="text" value="" name="FNAME" class="input required" id="mce-FNAME">
</div>
<div class="mc-field-group col-lg-6">
<label for="mce-LNAME">Last Name:<span class="asterisk"></span></label>
<input type="text" value="" name="LNAME" class="input required" id="mce-LNAME">
</div>
</div><!--row-->
<div class="row">
<div class="mc-field-group col-lg-8">
<label class="label" for="mce-EMAIL">Email Address<span class="asterisk"></span></label>
<input type="email" value="" name="EMAIL" class="required input email" id="mce-EMAIL">
</div>
<div class="col-lg-4">
<input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div><!--row—>
.mc4wp-form .input {
margin: 10px 0;
float: left;
width: 100%;
line-height: 25px;
border: 1px solid #000;
border-radius: 10px;
}
.mc4wp-form .input:focus,
.mc4wp-form .button:focus {
outline: none;
}
.mc4wp-form .button {
color:#ffffff;
margin-top: 34px;
display: block;
width: 100%;
background: #2451f4;
height: 30px;
font-size: 15px;
border-radius: 10px;
outline: none;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.mc4wp-form .button:hover {
cursor: pointer;
background: #000;
color: #fff;
}
.mc4wp-form {
width: 100%;
max-width: 470px;
}
.mc4wp-form .mc-field-group label {
display: block;
font-size: 22px;
}
.mc4wp-form .row {
display: block;
float: left;
width: 100%;
}
.mc4wp-form .col-lg-6,
.mc4wp-form .col-lg-8,
.mc4wp-form .col-lg-4 {
float: left;
padding: 12px;
box-sizing: border-box;
}
.mc4wp-form .col-lg-6 {
width: 50%;
}
.mc4wp-form .col-lg-8 {
width: 80%;
}
.mc4wp-form .col-lg-4 {
width: 20%;
}
Я дам вам подсказку: вам нужно переопределить собственный CSS-стиль (не на WP style.css) ... и продолжать пытаться !!! – maioman
То, что сказал @maioman. Если вы ссылаетесь на свой сайт, мы можем показать вам, что вам нужно изменить. – user3781632
@ user3781632 https://www.kayakinguk.com/ Мне удалось немного приблизиться, но все еще немного застрял. –