Return to previous page

Problem trying to change the Mailchimp Layout

This topic has 7 replies, 2 voices, and was last updated 6 years, 8 months ago ago by Rose Tyler

Graham

Participant

September 12, 2018 at 12:41

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

Please, contact administrator
for this information.

#199366 Copied

6 Answers

Graham

Participant

September 12, 2018 at 12:44

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
Rose Tyler

Support staff

September 12, 2018 at 13:26
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
Graham

Participant

September 13, 2018 at 09:55

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
Rose Tyler

Support staff

September 13, 2018 at 14:29
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
Graham

Participant

September 13, 2018 at 19:09

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

Rose Tyler

Support staff

September 14, 2018 at 07:04

Hello,

You’re welcome!
Have a good day too.

Regards

#199451 Copied
Viewing 7 results - 1 through 7 (of 7 total)