[schoolencasaParticipant]

Hello,

Like everyone else, I have a MailChimp form I would like to be inline. I’ve looked through lots of threads and tried lots of code, and have gotten it inline, but haven’t figured out how to target the email field (to make it wider) and the submit button (to adjust its margins so it is completely inline with the email field, and has a little space between the email field and submit button. This is the only MailChimp form I want inline, so I want to be sure to target only it. Here’s the code I have that is working right now:

form#x-subscribe-form-2784 {
width: auto !important;
max-width: 100%!important;
text-align: center
}

form#x-subscribe-form-2784
fieldset {
display: inline;
}

This form is found in the middle of this page: http://schoolencasa.com/docentes/ I’m attaching a screenshot of how it looks with this code.

Your help is much appreciated.

[ThaiModerator]

Hi There,

Please try with this CSS instead:

form#x-subscribe-form-2784 {
    width: auto !important;
    max-width: 100% !important;
}

form#x-subscribe-form-2784 fieldset {
    display: inline-block;
    width: 48%;
}
form#x-subscribe-form-2784 fieldset:last-child {
    float: right;
}
form#x-subscribe-form-2784 input[type="submit"] {
    padding: 12px 10px;
    margin-top: 0px;
}

Hope it helps 🙂

[schoolencasaParticipant]

This worked perfectly. Thank you very much.

The only issue I have now is that it doesn’t look right in mobile. I know it will be stacked again in mobile view necessarily, but the fields are not centered and are odd widths. Any fix for that, please?

[LelyModerator]

Hi There,

You’re welcome!
Please also add this:

@media (max-width: 480px){
form#x-subscribe-form-2784 fieldset {
    display: inline-block;
    width: 100%;
}
}

Hope this helps.

[Author]

Posts