[Resolved] Popup not displaying correctly on mobile browsers

[Eoin O’Malley]

Hi,

I am using a plugin called Easy Digital Downloads with an add-on called Free Downloads. This allows me to put a button my site so that users can click on, enter their details in a popup which will then take them to a receipt page where they can download a PDF for free, see http://www.learnhscmaths.com/notes/.

My issue is that the popup isn’t displaying correctly (i.e. responsive) on mobile themes under the GeneratePress theme. I’ve checked it under the Twenty Fifteen theme, and it works fine for that one.

Is there anything I can do to get it to display correctly?

Thanks,
Eoin.

[Tom]

Hi there,

That’s weird – it has a fixed width set as an inline style, I wonder how TwentyFifteen made it responsive.

For GP, try some CSS like this:

@media (max-width:768px) {
      .jBox-content {
            width: auto !important;
      }
}

Let me know 🙂

[Eoin O’Malley]

Hi Tom,

Thanks for your quick reply. I tried adding the CSS to both Simple Custom CSS and to Jetpack Edit CSS and unfortunately there was no change to how it appears on mobile.

Any other ideas?!!

Cheers,
Eoin.

[Tom]

Do you have both activated at the same time? I’ve noticed when both are activated, the CSS from both places doesn’t work.

Maybe try with just one activated?

Let me know 🙂

[Eoin]

Hi Tom,

Yes I tried doing that for each of them but unfortunately it made no difference.

Eoin.

[Tom]

While looking at your custom stylesheet, I’m not seeing the code I provided?

Can you make sure you have it added?

[Eoin]

Hi Tom,

Just revisiting this issue as I never actually got it sorted (sorry I was focussing on other things over the past few months). So I did add that code you provided to the CSS Stylesheet Editor. I also deleted the Simple CSS plugin so that there’s definitely no conflict there.

Any other suggestions for me to try?

Thanks,
Eoin.

[Tom]

It looks like it’s working for me on small screens? Maybe try clearing your cache?

[Eoin]

Really? Because I tried deleting cache and all browsing history on both safari and chrome on my iPhone but I still get the same result, I.e unresponsive (text and text boxes are very small and background colour is wrong). I’d upload a screenshot of I could but I don’t think there’s an option for that on this forum is there?

[Tom]

Hmm you’re right – it’s not playing nice on my Android either.

Is this functionality from a plugin? If so, you may have to ask the author of that plugin if they have any ideas, as I’m not sure how they’ve gone about developing it.

Let me know 🙂

[Author]

Posts