Hi!
I have an issue with a pop up newsletter modal on this site. https://academy.lashpilot.com/sales-page/ there’s many of them but it says register for our course today.
It looks fine on laptop, but on mobile it’s not centered and the content is doing some weird step alignment at the bottom Can you help:
Laptop:
mobile:
Hello Ariell,
Thanks for writing in! I have checked your page and I found out that you are not using the Content Area Modal element. This modal comes from a 3rd party plugin. I am not sure what is the name of the plugin. Kindly contact the creators of the modal plugin instead. They should be able to help you more as they have a better understanding of how their plugin works especially for smaller screens.
Thank you for your understanding.
Actually that is completely incorrect, this content modal is also actually part of the free content in design cloud called webinar opt in.
See screenshots:
The only outside plugins I have installed is woo commerce and braintree and inside the content modal is a mailchimp sign up form script. I will include login info in a secure note to make it easier for you.
Hey Ariell,
We are sorry for the confusion. When I opened your site, I am seeing this modal which also has the same issue.
All I know is that this modal is coming from a 3rd party plugin. After investigating the issue closely, I found out that you have added a custom CSS in Pro > Theme Options > Custom CSS:
input {
border-style: solid;
border-width: 1px;
border-color: #F23D4F;
margin-bottom: 10px;
padding: 8px 10px;
width: 300px;
background-color: #FFFFFF;
color: #000;
font-size: 10px;
}
The width: 300px; is the cause of your issue. Please have it updated and reduce the width to at least 250 or a width that is decent enough for your form layout. As an alternative, you may remove the width: 300px; completely instead.
Best Regards.
Hi! That Modal is a header script insert by mailchimp. I didn’t realize that had the same issue too. Now I removed most of the custom CSS it actually aligns.
Thank you, and I was able to keep the CSS that made the check boxes align on the lap top, However they are not aligning on mobile, any idea how I could solve this?
Hello Ariell,
Instead of using width: 300px; in your custom code. You can set it to 100%, like using: width: 100%; so that the width of the input will be as wide as the container width and will not exceed it.
We would love to know if this has worked for you. Thank you.
I tried that too, it only makes the lap top version wider and has no effect on the mobile look. Laptop version looks fine now, my problem is the check boxes at the bottom not ligning up on mobile, also the modal is very narrow despite trying to put it to 100%.
I don’t like the way it looks with 100% width on laptop.
Hello Ariell,
Kindly update the custom CSS code and use this instead:
input {
border-style: solid;
border-width: 1px;
border-color: #F23D4F;
margin-bottom: 10px;
padding: 8px 10px;
width: 100%;
max-width: 300px;
background-color: #FFFFFF;
color: #000;
font-size: 10px;
}
::marker {
content: "";
}
What has changed? We set the width to 100% and we also set the maximum width to 300px so that on laptop screens, it will not be as wide as the container.
Kindly let us know how it goes.
Hi!
Nothing really changed with that CSS, It is now centered like it is supposed to be but the check boxes are stepwise aligning towards the right, I would like them to align to the right like on desktop, and it has some kind of weird dot inside the check boxes for some weird reason only on mobile.
Hello Ariell,
When I checked your site on a smaller browser, I am already seeing this:
Kindly test your site in your desktop browser and resize the window. If you are using your phone in testing your site, you need to clear your phone’s browser cache or use private browsing mode and test the site again.
Regards.
It looks good in a smaller browser, after clearing caches it still does not align on my iPhone.
Hello Ariell,
Since it looks good on a smaller browser, clear the cache in your iPhone browser. If you have Chrome on your iPhone, kindly use private browsing mode and test the site again.
Kindly let us know how it goes.
That’s what I did, cleared the cache on my iPhone, it still doesn’t align.
The pop up mail form looks good on mobile, but not the one in the content modal pop up.
Hey Ariell,
I have checked your site on my Android phone. Here is what I am seeing:
Please take a screenshot of your mobile phone so that we can see what you are seeing.
Thanks.
Hi! Well good to know it at least looks good on android, here’s what it looks like on my iphone:
Hey Ariell,
I see it’s not aligned in iOS/iPhone. However, our theme is not causing the issue. It’s just the Mailchimp form that is not compatible with the Content Area Modal at-least just on iPhone.
I’m sorry but we can do nothing for this case because we cannot fix 3rd party or custom codes as part of our product support.
Please report this issue to Mailchimp support. The screenshot below shows that the issue is coming from Mailchimp code. It might work in a page but not on a modal.
Hope that helps and thank you for understanding.
Okay, I will try to contact Mail chimp. Thanks
You are most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
