The Divi Theme's "email optin" module (formally called the "subscribe" module) allows you to add a form to your pages which users can use to join your mailing lists. A tutorial by Geno showed how to use CSS to change the layout of the module's signup form into a horizontal format. Unfortunately changes in Divi's implementation of the module have stopped that code (and the Divi Booster feature based on it) from working. I recently revisited this implementation and came up with a new, simplified, way to make the email optin module's form horizontal via CSS.
Here's the CSS code:
@media only screen and (min-width: 981px) {
.et_pb_subscribe .et_pb_newsletter_fields > p {
flex: auto !important;
}
.et_pb_subscribe .et_pb_newsletter_fields p.et_pb_newsletter_field {
margin-right: 2%;
}
}Related Post: Adding CSS to the Divi Theme
I've added this as a new option in Divi Booster (v2.8.8 onwards), which can be activated for individual modules. With Divi Booster activated, you'll find the setting in the module options at "Email Optin Module Settings > Advanced > Layout > Inline Form".
Thank you so much for this. I have been looking for a very long time for a CSS code like this. Much appreciated.
You're welcome, CC!
Just wanted to thank you for all the help you post for us new to Divi and CSS. Much appreciated. I am purchasing your booster.
You're very welcome, Steven! Enjoy Divi Booster and give me a shout if there's ever anything I can help with. Cheers!