Fully Horizontal Email Fields & Buttons

Support
#1

Hi, I’m wondering what I would need to do in order to get all three elements (two form fields and the button) of the standard Email Plugin elements to line up horizontally on the webpage. I’ve seen other posts about horizontal alignments for the form fields themselves, but I haven’t seen anything related to all three forms.

I’d love any help you can provide me as I’ve attempted it multiple times on my own to no avail.

Thanks again,

#2

Hello @philahudson,

Thanks for writing in! May I know which email plugin you have installed in your site? To better assist you with this, please provide us the url of the page where we can find the elements so that we can provide you a tailored solution for your site.

Thank you in advance.

#3

As stated in my above response, I’m just using the standard email plugin that comes with Pro and X Theme. I added it through the add-ons page. The dev site is: https://simone.entronicstech.com.

#4

Hi @philahudson,

Please follow the custom CSS provided here, you might also need to set the max-wdth of the Email form none so it will have enough space for fields and button.

Thanks,

#5

Great, thanks @friech. One last thing. I notice the button on the right does not line up with the fields. I added a margin:0px !important; to the button which helps a little, but I can’t get it to line up exactly. Any thoughts?

#6

Hi @philahudson,

You could also add position:relative; top: -1px; Then change -1px according to your preferred alignment.

Hope this helps.

#7

Thanks for that. It worked. Here’s the final code I used for anyone else who wants to duplicate this.

/Horizontal Forms/
.tco-subscribe-form {
max-width: 100% !important;
}

.tco-subscribe-form > fieldset {
display: inline-block;
}

.tco-subscribe-form > fieldset input {
display: block;
}
.tco-subscribe-form input[type=“submit”] {
position:relative; top: -6px;
}
.tco-subscribe-form input[type=“text”], input[type=“email”] {
height:55px !important;
}

#8

Hi @philahudson,

Thank you for sharing the final code :slight_smile:.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.