Docs

[nicolas.novielli@poplabusa.com]

Hi Guys,
I need some help trying to fix my subscribe for on my home page,
http://poplabicepops.com/.
I want do do the following
1) Make email field same size as the Subscribe Button
2) Center the email field and the subscribe button so they are right next to each other (no spacing in between)
3) Same padding/Margin on top and bottom of the container.

Hope you can help.

Thank You so much

Nick

[Prasant Rai]

Hello Nick,

Thanks for writing in!

.x-column.x-sm.vc.x-1-2.mpc-column input.mc_email {
    margin-top: 6px;
    width: 100% !important;
}

div#x-content-band-4 .x-container.wpb_row.mpc-row {
    width: 30%;
    margin: 0 auto;
    display: block;
}

.vc-mailchimp-sub-btn.size_big {
    padding: 10px 50px;
}

Let us know how it goes.

Thanks.

[nicolas.novielli@poplabusa.com]

Thank you so much for your help.

I need few extra things
1) Make the email field a little longer and taller
2) Make the submit button to match email field
3) fix margin / Padding of the container to be the same in top and bottom

Hope you can help

Nick

[Joao]

Hi Nick Please add this following code to your Customizer CSS:

input {
border-radius: 5px !important;
}

@media (min-width:801px) {
.vc_mailchimp_form_cont .align_left {
padding-left: 50%;
}
}

.page-id-404 #x-content-band-4 .x-content-band .vc {
padding-bottom: 40px 
}

@media (max-width:801px) {

.x-column.x-sm.vc.x-1-2.mpc-column input.mc_email {
    margin-top: 4px;
    width: 100% !important;
    height: 3.1em;
}

div#x-content-band-4 .x-container.wpb_row.mpc-row {
    width: 60%;
    margin: 0 auto;
    display: block;
}
} 

Change this:

.x-column.x-sm.vc.x-1-2.mpc-column input.mc_email {
    margin-top: 6px;
    width: 100% !important;
}

for this:

.x-column.x-sm.vc.x-1-2.mpc-column input.mc_email {
margin-top: 4px;
width: 153% !important;
height: 3.1em;
}

Hope that helps,

Joao

[Joao]

Hi Nick Please add this following code to your Customizer CSS:

input {
border-radius: 5px !important;
}

@media (min-width:801px) {
.vc_mailchimp_form_cont .align_left {
padding-left: 50%;
}
}

.page-id-404 #x-content-band-4 .x-content-band .vc {
padding-bottom: 40px;
}

@media (max-width:801px) {

.x-column.x-sm.vc.x-1-2.mpc-column input.mc_email {
    margin-top: 4px;
    width: 100% !important;
    height: 3.1em;
}

div#x-content-band-4 .x-container.wpb_row.mpc-row {
    width: 60%;
    margin: 0 auto;
    display: block;
}
} 

Change this:

.x-column.x-sm.vc.x-1-2.mpc-column input.mc_email {
    margin-top: 6px;
    width: 100% !important;
}

for this:

.x-column.x-sm.vc.x-1-2.mpc-column input.mc_email {
    margin-top: 4px;
    width: 153% !important;
    height: 3.1em;
}

Hope that helps,

Joao

[nicolas.novielli@poplabusa.com]

Hi Joao,
Thank You for Quick response, I tried the code you send me but is not quite working.
Please look at the attached screenshot,so you can have a better undestanding of what i’m trying to achive

Thanks Again for all your help

Nick

[Lely]

Hi There,

Thank you for the screenshot.
Please update this:

div#x-content-band-4 .x-container.wpb_row.mpc-row {
    width: 30%; 
    margin: 0 auto;
    display: block;
}

To this:

div#x-content-band-4 .x-container.wpb_row.mpc-row {
    width: 50%;
    margin: 0 auto;
    display: block;
    margin-bottom: 40px;
}

Then add this:

@media (min-width: 768px){
div#x-content-band-4>div>div {
    width: 65% !important;
    margin-right: 1% !important;
}
div#x-content-band-4>div>div+div {
    width: 25% !important;
}
}

Then update this:

.x-column.x-sm.vc.x-1-2.mpc-column input.mc_email {
    margin-top: 4px;
    width: 153% !important;
    height: 3.1em;
}

To this:

.x-column.x-sm.vc.x-1-2.mpc-column input.mc_email {
    margin-top: 4px;
    width: 100% !important;
    height: 3.1em;
}

Also remove this:

@media (min-width:801px) {
.vc_mailchimp_form_cont .align_left { padding-left: 50%; }
}
}

See attached screenshot of the result.

Hope this helps.

[nicolas.novielli@poplabusa.com]

Thank you so much it worked perfect!!!

[nicolas.novielli@poplabusa.com]

you rock guys!!!!

[Joao]

You are welcome.

Let us know if you need further help.

Joao

[Author]

Posts