Return to previous page

Topic: Problem trying to change the Mailchimp Layout

Graham

Participant

September 12, 2018 12:41 pm

Hello,

I’m having an issue with the Mailchimp form layout on mobile:

1. By theme default, there was a contact form at the bottom of the homepage and all categories, which looks great on both PC and mobile view. (But maybe not a good choice for email marketing purpose)
CF7 Screenshot:

So, I changed it to MailChimp instead.

2. Just wonder how can I have the exact same form styling like what the Contact Form appears.
Mailchimp Screenshot:

3. (Not important, but there is slight color and size difference between the original “Contact Form button” and the “MailChimp Button” on the desktop.
Screenshot: https://ibb.co/i4mq29

Can you pls let me know how can I have the exact same layout just like the
Site URL: hidden

Content is visible for topic creator and
support staff only.

#199366 copied to clipboard

Graham

Participant

September 12, 2018 12:44 pm

Sorry just noticed the screenshot may be unvisible/broken above:

Here is the screenshot of the

1. ContactForm Screenshot: https://ibb.co/ejMON9

2. MailChimp Screenshot: https://ibb.co/cm2r9p

Regards

#199369 copied to clipboard
Rose Tyler

Support staff

September 12, 2018 1:26 pm
Hello,

Please add this code in Global custom css:

.mc4wp-form input[type="submit"] { right: 8%; font-size: 13px !important; letter-spacing: 2px !important; width: 145px !important; height: 50px !important; color: #fff !important; background: #26172c !important; font-family: Yantramanav; } .mc4wp-form input[type="submit"]:hover {background: #ff83a0 !important;} .mc4wp-form input[type="email"] { width: 77%; }

and this in Custom css for mobile:

.mc4wp-form input[type="submit"] { top: 80px; float: none; text-align: center; left: 35%; } .mc4wp-form input[type="email"] { width: 100%; }

Let us know the result.

Regards
#199373 copied to clipboard
Graham

Participant

September 13, 2018 9:55 am

Thanks very much for your help, but unfortunately there still seems to be some little errors, can you pls have a check?

1. Screenshot of Mobile view: https://ibb.co/hLo9VU

2. Screenshot of Desktop: https://ibb.co/mbWPx9

For your information:
(the global site width is “1328px”, and the homepage is “1550px” on the desktop.)

Kind Regards

#199405 copied to clipboard
Rose Tyler

Support staff

September 13, 2018 2:29 pm
Please change this code in Global Cutom css:

.mc4wp-form input[type="email"] { width: 77%; }

to:

.mc4wp-form input[type="email"] { width: 77%; height: 3.6rem; float: left; background-color: white; border: 1px solid #f0f0f0; }

and this:

body .subscribe-block{ padding:40px 0 150px 0 !important; }

to

body .subscribe-block{ padding:40px 0 100px 0 !important; }

Also change this in Custom css for mobile:

.mc4wp-form input[type="submit"] { top: 80px; float: none; text-align: center; left: 35%; } .mc4wp-form input[type="email"] { width: 100%; }

to:

.mc4wp-form input[type="email"] { width: 100% !important; } .mc4wp-form input[type="submit"] { top: 70px; float: none; text-align: center; left: 33%; position: absolute; }

Regards
#199426 copied to clipboard
Graham

Participant

September 13, 2018 7:09 pm

Hi,

Just wanna say Thank you very much!

It is working just perfect now on both Desktop and Mobile view.

Hope you have a great day!

Best Regards
Graham

#199439 copied to clipboard

Rose Tyler

Support staff

September 14, 2018 7:04 am

Hello,

You’re welcome!
Have a good day too.

Regards

#199451 copied to clipboard