Horizontal Mail Chimp Form

Support
#1

His I am try to make this mail chimp sign for on this page horizontal

I have tried adding both codes from this thread

and neither made any changes to the form could you advise please ?

Thanks

Tim

#2

Hi Tim,

It has different structure and in different location. See this: https://screencast-o-matic.com/watch/cbQqXQIrV4

.tco-subscribe-form fieldset {
    float: left;
}
.tco-subscribe-form fieldset:first-of-type {
    margin-right: 20px;
}

.tco-subscribe-form fieldset:last-of-type {
    margin-top: 15px;
    margin-left: 20px;
}

Feel free to adjust values and use inspect element on how to control display and design

#3

Thanks that worked great but have tried to center the form and am unable to do this could you advise please ?

#4

Hi There,

Try adding the following CSS rule also.

.page-id-4820 #tco-subscribe-form-6170 {
    display: block;
    margin: 0 auto;
    max-width: 700px;
}

Hope that helps.

#5

Hi thanks that worked great but the styling goes on tablet and mobile devices. On a tablet it isn’t centred and on a phone it displays funny. Could I have have it centred on all devices until it gets too small like mobile an then just have it stacked ? how would I go about this ?

Thanks

Tim

#6

Hey Tim,

You can add the following code in your Customizer:

@media screen and (max-width: 670px) {
    .tco-subscribe-form fieldset {
        float: none !important;
        margin: 0 !important
    }
}

Hope this helps!

#7

Thanks that worked well

#8

Glad it worked.

Cheers!

#9

I would love to do this as well, but the css isn’t doing a whole lot for me.

my form is on

I would like it to adjust like this as the window is scaled:

Full width

smaller screen

smallest screen

Thanks.

#10

Hi There,

Please remove the previously added code and add the following CSS to Theme Options CSS

@media(min-width: 969px) {

.tco-subscribe-form fieldset {
   
    width: 30%;
}

.tco-subscribe-form input[type="submit"] {

    margin-top: -57px;
}    }

@media(min-width: 769px) and (max-width: 969px) {


.tco-subscribe-form select, .tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"] {
 
    height: 54px;
}

.tco-subscribe-form fieldset {
  
    width: 50%;
}

.tco-subscribe-form fieldset:last-of-type {
  
    width: 100%;
}}

Hope it helps!

#11

It is looking good, but still doing some very weird things at different sizes. My main concern is the large padding/margin on the right side of the submit button when the screen is full width. I can’t figure out why that gap is there.

#12

Hi there,

Please kindly open up a separate thread and give us the exact screenshot of different cases that you see problems regarding the padding and margin. Our support team will try their best to help you around with CSS code.

Needless to say that the functionality you asked for is a part of customization and outside of our support scope, we will not be able to implement the code for you or maintain it in the future but we will do our best to suggest proper codes to get you started with.

Thank you for your understanding.

#13

Will do. Thanks

#14

You’re always welcome!

We will check and get back to you on the new thread.