Return to previous page

Problem trying to change the Mailchimp Layout

This topic has 7 replies, 2 voices, and was last updated 5 years, 7 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)