[Plugin: MailChimp List Subscribe Form] Space between fields and long fields

Hey there, wibbsy!

Would you mind sending us a link to your page so we can have a closer look at how it’s behaving?

As far as the duplicate countries, whoopsie! Our bad. Looks like our developers are in the midst of getting that corrected, now. ??

Give us a shout back!

Cheers

wibbsy.com (development site)

You’ll see that the countries field actually overflows into what is essentially a new css div (column).

Hey again, wibbsy!

Alright…so it looks like we’ve got a couple of different things going on.

A) It looks like the field itself is stretching too wide. We can definitely fix that through the CSS by applying this style:

#mc_signup_form select {
width: 100%;}

That should bring the form down to a little something like this:

Screenshot — https://cl.ly/2o0l0V302I0W3z2k2t2m

B) When clicking on that field now, it will expand back to it’s larger size. This is due to the length of the largest field in that drop-down option. It looks like, specifically, “South Georgia and the South Sandwich Islands” are to blame for blowing out that field option. We’d recommend going in and either breaking up that field or, if you don’t think anyone will be signing up from South Georgia and the South Sandwich Islands, it’s probably safe to remove that from your field, entirely.

One thing to keep in mind is that once it’s removed, it won’t necessarily auto-populate over to the WordPress site. So you’ll need to go to “Settings” -> “MailChimp Setup” -> “Update List” to get those fields to update, accurately.

As far as adding a little spacing between the “User Type” group selection, we can again lean on CSS for a helping hand! Essentially, we’ll want to add a specific line-height attribute to the “mc_interests_header” class. Something like 30px ought to give enough spacing to distinguish between the two sections:

.mc_interests_header {
line-height: 30px;}

We could also do the same thing by applying some CSS to the “Preferred Format” area, or the “mergeRow” class:

div.mergeRow {
line-height: 30px;}

It’s also possible to apply a font-weight attribute to set that to bold, as well. In the end, we have something that looks a little something like this:

Screenshot — https://cl.ly/303Z371y1E2q170Q3g36

If we can help with anything else, give us a shout!

Cheers