Mailmunch form mobile responsiveness

Support
#1

Hello.

Using text i inserted mailmuch form. It looks good on PC and looks cut at the right side of mobile.

Tried adding the following code:
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

But its the same, could you kindly advise how to fix this issue.

Second issue I have faced is that some iframes are not visible at all, example given below:

image
image1080×350 11.5 KB
This is not displayed on mobiles, could you advise what to do

Thank you

#2

Hi Haz,

Thanks for reaching out.

I don’t see any iframe wrapping that Ads, it seems your Ads is only limited to desktop since it’s generated by the embed script that you added. I recommend contacting the Ads provider.

Thanks!

#3

Found out from Amazon tech support that Amazon is have technical issues with their banners, patiently need to wait for resolution, thank you for your help, problem was spotted thanks to you

#4

You’re welcome.

#5

Dear Team,

Could you kindly help with this issue.
Looks great on website

image
image1477×426 17.1 KB

Once checked on mobile this is the result, tried playing with margins and paddings but with no sucess
image

#6

Hi Haz,

I can’t see that, is that the same ads? If yes, the cause is the same, the content of the Ads and form does not respond to iframe dimension. With that, it can’t be fixed with any styling since the content is within the iframe or Ads.

Else, if it’s an actual form then I recommend providing a URL where we can see it :slight_smile:

Thanks!

#7

Not related to the ads, yes its a form
of course, i have attached it in the secure note
thank you so much

#8

Hi Haz,

Thanks for the clarifaction. I checked and it’s due to this 3 custom CSS

image

I assume it’s the fix for your other iframe embeds, and because the form is within the iframe, then it gets affected as well. For that, you’ll need to add this CSS

.mailmunch-forms-short-code mailmunch-forms-widget-914675 iframe {
width: 100% !important;
min-width: 0px !important;
max-width: 100% !important;
}

I also recommend check this Changing blog post text size in CSS affects Navigation Collapsed and Classic Feature List elements in case you need to create a CSS with proper selector.

Thanks!

#9

Unfortunately this didnt fix the problem, do you have any alternative to resolution of this problem?
thank you for your time,

#10

Hello Haz,

Please have the code updated and use this instead:

.mailmunch-forms-short-code .mailmunch-embedded-iframe {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

We would love to know if this has worked for you. Thank you.

1 Like
#11

It looks amazing, thank you so much Ruenel!

#12

You’re welcome!
We’re glad we were able to help you out.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.