Pop up on mobile: layout not correct

Hello,
I'm experiencing an issue with pop up pro on mobile devices.
using an iphone 4S the pop up cuts the call to action button, either if the image is shown or not.
I'm attaching here what I see on my mobile.
thanks

  • Adam Czajczyk
    • Support Gorilla

    Hey Simone,

    I hope you're well today and thank you for your question!

    Please check if you've set a custom popup size (see image). If so, the popup will not be responsive. Uncheck it and it should help. Also, there's a chance (at least judging from your screenshot) that you've set some custom styles (like font sizes) for the popup content. If so, make sure that those are percentage (%) or "em" values instead of fixed (.px) Otherwise content won't scale properly.

    Check these things out and please let me know if it helped. If this is not a case, then would you please be so kind a grant me a support access to your dashboard so I could take a closer look?

    To do this, please follow this guide:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Cheers,
    Adam

  • Simone
    • Flash Drive

    Hello Adam,
    unfortunately I didn't set any custom size (the box is unchecked).
    Also the font size is not set:
    Learn more about MATS SO2 Standards (Mercury and Air Toxic Standards). <a href="http://fluegasknowhow.com/so2-emissions-mats/" target="_blank">The SO2 Interactive Map</a> will help you to stay continuously updated on the evolving market of SO2 emissions in the United States.
    this is the code I'm using.
    any other suggestion?
    thanks

  • Adam Czajczyk
    • Support Gorilla

    Hey Simone,

    I've checked your site and examined your popup with Firefox responsive view tool. It does actually look the same as on your iPhone so I have a good starting point for testing.

    On the popup edit screen there's a "Custom CSS (optional)" field. Please try adding these lines there:

    .wdpu-2397 .wdpu-titile {
    font-size: 1.2em!important;
    }
    .wdpu-2397 .wdpu-subtitle {
    font-size: 1em!important;
    }

    This should make popup's title and subtitle responsive. It fixes issue in my preview so please give it a try and let me know if it worked for you! You may have to clear your browsers cache though :slight_smile:

    Cheers,
    Adam

  • Predrag Dubajic
    • Support

    Hey @Simone,

    Hope you are having a nice weekend :slight_smile:

    I have tested your site on iPhone and can see the issue you are referring to, can you try adding this CSS code and that should do the trick:

    .wdpu-2397 .wdpu-titile {
    	height: auto;
    }

    Please let us know if it's working after that.

    Best regards,
    Predrag

  • Simone
    • Flash Drive

    Hello Predrag,
    doesn't work!
    The point is that if I uncheck the option "never see this message again" the action button appears on mobile portrait layout.
    If I check the option, the action button appears cut!
    But I do want to show the option "never see this message again".
    Help please!!!!

  • Adam Czajczyk
    • Support Gorilla

    Hey Simone!

    I'm afraid I made a typo in the code I gave you. As it's a "tiny-tiny-little" typo, I didn't spot that before :slight_smile: I'm sorry for that.

    The code, both mine as well as Predrag's should start with

    .wdpu-2397 .wdpu-title {

    Please note thats "title" not "titile" as in my previous code.

    Would you give it one more try then? Let me know how it went, please!

    Cheers,
    Adam

  • Simone
    • Flash Drive

    Hello Adam,
    thanks I made all the corrections, but still got this issue.
    Now, I switched to "Cabriolet" style which seems to be a little better.
    But for "Minimal" style, no way to avoid the button cut.
    As stated before, if I remove the "never see this message again" the layout has no problems.

  • Adam Czajczyk
    • Support Gorilla

    Hey Simone!

    I've taken another look at your page. I don't have an iPhone at hand at the moment but I've checked it again with Firefox responsive view tool and a Windows Phone browser. With current style of the popup it seem that there's simply to much content inside. For relatively small screens it would be hard to maintain all this and still keep it readable.

    I've noticed that there's an image that's always visible. Why not turning it off for mobile browsers? This should make more room for other content (on popup edit screen "Hide image for mobile devices" option).

    Cheers,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hey Simone,

    I took a liberty of changing popup's CSS directly on your site a bit. I think I'm getting closer to the solution :slight_smile: Could you please take a look and let me know if this looks fine?

    I've used Firefox responsive view and an iPad5 emulator so I'm not sure about it. I hope though this is better now :slight_smile:

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.