Horizontal mailchimp email form

[Savz01]

I’d like to make my email form horizontal, like this other website I built a couple of years ago:

Summary

http://selfknowledgemanagement.org

This is the website I’m working on: https://thehumusproject.org

I’ve seen on the forum that you suggest adding CSS for similar issues but wasn’t sure where this would be added (or which code it is that I need).

In other posts you mention adding code in ‘Theme Options > Global CSS area’ or ‘X > Theme Options > CSS’ (as examples). Where do I find these? Are they a feature of the Customizer?

Many thanks.

[thai]

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

form#tco-subscribe-form-133 {
    max-width: 600px !important;
}
form#tco-subscribe-form-133 fieldset {
    width: 42%;
    display: inline-block;
    margin-right: 2%;
}
form#tco-subscribe-form-133 input,
#tco-subscribe-form-133 > fieldset:nth-child(7) {
    margin: 0;
}
#tco-subscribe-form-133 > fieldset:nth-child(5),
#tco-subscribe-form-133 > fieldset:nth-child(6) {
    display: none;
}

The Theme Options CSS is under X menu in your admin bar:

Hope it helps

[Savz01]

Hi, thanks a lot, that worked!
The padding(?) is quite big around the email form, would you be able to give me the css for decreasing it enough so that the title is on one line on an average screen?

[thai]

Hi There,

Please change the 600px to 680px.

Hope it helps

[Savz01]

Hi, yes that’s great, thank you!

A further question: The sentence underneath ‘News from the Humus Project…’ is quite low down. Can the margin under the email form also be decreased so that the text is an equivalent distance from the form as the title above it?

[ruenel]

Hey There,

To reduce the space below the form, it is actually because of the padding and not the margin. Please use this code:

#tco-section-1 {
    padding-bottom: 20px !important;
}

Please let us know how it goes.

[Savz01]

Thank you that’s great!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.