Docs

[[email protected]]

On page http://www.gaflajewellery.com/wpsite/contact-us/ following CSS enables an in-line mailchimp subscribe form …

@media (min-width: 480px) {
.x-subscribe-form-1290 {
max-width: 100% !important;
}
.x-subscribe-form-1290 fieldset {
width: 74%;
float: left;
margin-right: 0%;
display: block;
}
.x-subscribe-form-1290 fieldset:last-child {
width: 25% !important;
float: left;
margin-right: 0;
}
.x-subscribe-form-1290 input[type=”submit”] {
margin-top: 0px !important;
background-color: #de7929;
border: none;
font-family: “Lato” !important;
color: white;
padding: 11px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px !important;
line-height: 14px !important;
}
.x-subscribe-form input[type=”email”]{
font-family: “Lato” !important;
padding: 8px 15px;
font-size: 14px !important;
line-height: 14px !important;
}
.x-alert {
display: inline-block;
}
}

But when a visitor subscribes, the success alert scrambles the form layout. How do I ensure form layout is not scrambled ?

This is the css class for the alert : .x-alert

[Rahul]

Hi there,

Greetings! Thank you for contacting us 🙂

You can add this under Custom > CSS in the Customizer.

.mrn, .mhn, .man {
    margin-right: 139px !important;
}

Let me know if this helps! Thanks

[[email protected]]

I am afraid that did not help, just moved it around a but. Attaching screenshot, but you can try it too…use a dummy email like [email protected] to see yourself. I will remove these emails from the list later.

[Rahul]

Hi There,

Thank you for providing us the screenshot.

Just to confirm before I provide you the CSS code, are you trying to make the width of the success alert of the same width as the Subscribe Button?

Awaiting your response. Thanks!

[[email protected]]

I really do not care about the width of the alert, ideally it’s width should only be as wide as the message.

My main concern, and only concern is not to have my initial form layout broken.

Thanks.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer Custom > CSS

.x-alert {
    margin-top: 20px !important;
}
@media(max-width: 769px) {
.x-alert-success, .x-alert {
width: 100%;
}
}

Hope it helps

Joao

[[email protected]]

You gave this code below…

.mrn, .mhn, .man {
margin-right: 139px !important;
}

That screwed the map on my contact us page. Why are you trying to modify those classes ???

[Joao]

Hi There,

Please remove:

.mrn, .mhn, .man {
    margin-right: 139px !important;
}

Hope that helps,

Joao

[[email protected]]

With this code below…it is not helping…not even close…

.x-alert {
margin-top: 20px !important;
}
@media(max-width: 769px) {
.x-alert-success, .x-alert {
width: 100%;
}
}

What are you trying to accomplish, we need to ensure the form layout stays intact. check this screenshot.

[[email protected]]

Yes Jao removing those CSS helped restore the map. Please suggest the modification so this map layout is preserved after a successful submit.

[[email protected]]

Sorry I meant the form layout (not map layout) is preserved after a successful submit.

[Nabeel A]

Hi again,

Please find the following code in your Custom CSS:

.x-subscribe-form-1290 fieldset {
    width: 74%;
    float: left;
    margin-right: 0%;
   display: block;
}

And replace it with this:

.x-subscribe-form fieldset:nth-child(3) {
    width: 75% !important;
    float: left;
    margin-right: 0%;
    display: block;
}

Let us know how this goes!

[[email protected]]

Hey that solved it, thank you so much Nebeel for hitting it right on the head.

🙂

[Rad]

You’re welcome!

[[email protected]]

Rad, Nebeel, one last thing, can I have the Subscribe button on the left and the email field on right ?

[Author]

Posts