Horizontal Email Form

Support
#1

Hello,

I was browsing through the forums and found a couple of post but nothing that helps me with the positioning. I have entered the css code on the global custom but there might be something I’m missing. I pretty much need it long-horizontal on desktop, laptop and stacked on mobile (which that part already works)

Current.
(side now, how do I get rid of that shadow on the text?)

Goal for Laptop/Desktop Display

Thank you.

#2

Hello There,

Thanks for writing in!

To resolve your issue and line up your email form, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 980px) {
    .tco-subscribe-form fieldset {
        float: left;
        margin-right: 4px;
    }

    .tco-subscribe-form select, .tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"], .tco-subscribe-form input[type="submit"] {
        margin-top: 0;
        margin-bottom: 0;
    }
}

We would loved to know if this has work for you. Thank you.

#3

Hi,

It kinda sorta did the trick.

I’m trying to get subscribe button to the right as well. That’s pretty much it.

#4

Hello There,

Increase the maximum width of the form. At the moment, it is only 600 pixels. If you set 1000 pixels or more, the fields and the submit button should line up.

Please let us know how it goes.

1 Like
#5

Awesome. That was it. I assume I should be able to center align it via that code or do I need to add another .tco-subscribe-form?

#6

Hello There,

Simply set the maximum width to 650 pixels and update the code into this:

@media(min-width: 980px) {
    .tco-subscribe-form fieldset {
        float: left;
        margin-right: 4px;
        max-width: 200px;
    }

    .tco-subscribe-form select, .tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"], .tco-subscribe-form input[type="submit"] {
        margin-top: 0;
        margin-bottom: 0;
    }
}

Please let us know how it goes.

1 Like
#7

Thank you. That was it!

#8

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

#9

Sorry to bug again, having a hard time with the button lining up. Basically I found via google “margin-top: 0.25em;” I think this is cause a slight misalignment with the button and boxes.

I need the button to move up just a smidge. &

  • be able to lengthen the boxes a bit
  • and kill the shadow on the text.

I kinda know how to get to this via index and stuff but being it’s WP and Themeco not sure how I should approach these in the future as I know there isn’t custom code support.

#10

Hello There,

Thanks for updating in!

Please make use of this code:

.tco-subscribe-form input[type="submit"] {
    margin-top: 0;
    padding-top: 11px;
    padding-bottom: 11px;
    border-radius: 0;
    min-width: 200px;
    text-shadow: none;
}

Hope this helps.

#11

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