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: hiddenSorry 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
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
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
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
Hello,
You’re welcome!
Have a good day too.
Regards
You must be logged in to reply to this topic.Log in/Sign up
One standard license is valid only for 1 project. Running multiple projects on a single license is a copyright violation.
The message was successfully sent
Your shopping cart is empty
You may extend support period on ThemeForest and then update its status by clicking "Update" button in your Account area.
Purchase code | Expiration date |
---|---|
adb2cf8c-15ed-4d7a-a406-790658a81a6c | 03 Dec 2019 |