Styling an Embedded Mailchimp Signup Form

Hi,

since I am using groups to organize my newsletter/subscribers, I can not use the standard Enfold “MailChimp signup element”; instead I had to play around with the MailChimp code for embedded forms.

So what I did is to hide my groups and to precheck one of the groups.

So far so good. I also managed to get the 3 fields inline, but I am not yet satisfied with the layout.

I would like to have the 3 fields (email address, first name and submit button) distributed with each 1/3 width, as it can be done with the Enfold “MailChimp signup element”.

See this screenshot here:
The form above is done with the Enfold Element, the form below with the MailChimp code for embedded forms.

How could I get the same layout with the embedded code?

Currently I am using the following CSS-code (the entire Mailchimp-code is wrapped in a div named “horizontal-mailchimp”):

.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear {
     display: inline-block; 
}

.horizontal-mailchimp label {
     display: block;
     height: 1px;
     text-indent: -9999px;
}

.horizontal-mailchimp {
     text-align: center;
}

@media only screen and (max-width: 768px) {

     .horizontal-mailchimp .mc-field-group,
     .horizontal-mailchimp .clear,
     .horizontal-mailchimp input {
          display: block;
          width: 100%;
     }

     .horizontal-mailchimp .mc-field-group {
          margin-bottom: 5px;
     }
		
}

Here is the page where I want to add this signup form.
I used/kept the (hidden) Enfold Mailchimp signup element just for reference.

• This topic was modified 6 years ago by catchbudapest. Reason: small corrections