Form Style

[pdavidsonphoto]

I added a MailChimp sign-up form to my home page. I've tried adding the MailChimp styles and also removing them to take on the theme styles but each time the button falls below the form. I'd like it placed to the right of the submit field. Would appreciate some help on accomplishing it. I'm using the Mai Lifestyle Pro Child Theme. Here's my website page: https://patriciadavidsonphotography.com The form is right below the top banner. Thanks.

https://patriciadavidsonphotography.com/

[JiveDig]

Hi there. The site is looking great!

You can add this to Customizer > Additional CSS to get it all on one line.

#mc_embed_signup_scroll {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
}

---

Lead developer of Mai Theme

[pdavidsonphoto]

Thank you, that works! Curious though, the input field is smaller. I liked the larger version.

[JiveDig]

You can do something like this:

#mc_embed_signup_scroll > p:first-child {
	-webkit-box-flex: 1;
	flex: 1 1 auto;
	max-width: 320px;
	margin-right: -1px;
}

---

Lead developer of Mai Theme

[pdavidsonphoto]

Thank you!

[pdavidsonphoto]

Unfortunately, this code messes up another full form I on another page here:
https://patriciadavidsonphotography.com/subscribe/ Anyway to only target this little form on the home page?

[JiveDig]

Of course. Just add .home before it all.

.home #mc_embed_signup_scroll {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
}

.home #mc_embed_signup_scroll > p:first-child {
	-webkit-box-flex: 1;
	flex: 1 1 auto;
	max-width: 320px;
	margin-right: -1px;
}

You could even add a custom class just to that Section via the Advanced Settings of the section, and use that instead of "home" so it only targets that section.

---

Lead developer of Mai Theme

[pdavidsonphoto]

Perfect, thank you!

[JiveDig]

🍻🎉

---

Lead developer of Mai Theme

[Author]

Posts