Responsiveness shows only black background

Daud – I had exactly the same issue, and I switched back to 4.7.1.1 and the problem goes away. I see you are using Avada, same as me… I wonder if it is a conflict with the theme? Anyway, be good to see if anyone has a solution because is nice to keep plugins at latest version.

David

Thanks David, it worked.

It’s true i have also the Avada Theme…

Hope someone can figure out the problem.

Cheers,

Daud

Hey guys,

How are you doing today?

If both of you are using Avada and this happens in both cases there is a good chance that there is a conflict with a theme. Unfortunately as Avada is premium theme there is not much that we can do in order to test that.

In order to test and confirm that you can temporarily switch to one of the default WordPress themes to check if the same happens there as well.

Please let me know ??

Cheers,
Bojan

Hi Bojan,

I did switch theme to Twenty-Twelve / Thirteen / Fourteen / Fifteen, and the problem is not there… so yes I guess it’s a conflict with Avada theme. I tried Avada support but they said I need to ask the plugin developer.

(NOTE I am only having a problem with the plugin when viewing on MOBILE, desktop is ok)

It works ok, with your version 4.7.1.1 – you can see it working here (set to 5 seconds I think)

https://wabisabiwell.com

After the 4.8.0.0 update, on mobile it just shows a opaque background, nothing else. If I change back to 4.7.1.1 it works ok again.

You can see the issue, when viewing on mobile, on this staging Avada install running the 4.8.0.0 version of the plugin:

stage.wabisabiwell.com

I have a side-by-side screenshot showing the issue, but there’s not way for me to post this.

If you can see any reason that the 4.8.0.0 update is showing just the opaque background, can you please let me know ?

Kind regards,

David

Hi David,

I had a look at this on my end and the issue is definitely with the theme itself.
In their avada-global.css file there’s this CSS included:

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: portrait) {
    .popup {
        display: none !important;
    }
}

Using !important in CSS is never a good idea especially if the element is not closely defined as it overrides all other CSS values and can affect elements from other plugins you have running, as it’s the case here.

I would suggest contacting them with this information and they should be able to provide you with more info about best way to fix this.

We could add some additional CSS to override their existing CSS code, it’s not the best solution but it should work with this code:

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: portrait) {
    .wpmui-popup .popup {
        display: block !important;
    }
}

Adding that to Theme Options > Custom CSS should do the trick.

Cheers,
Predrag

Hi Predrag,

Thanks for your help with this.

I did add the additional CSS to the Avada Theme Options > Custom CSS, but it hasn’t fixed it (the css is still in place now).

Avada have said they can’t get into any form of support with plugins, so I don’t think getting back in touch with them is going to help.

I tried to find the avada-global.css file in their theme files so I could replace it with a version without that line to check, but I couldn’t find avada-global.css anywhere.

I thought also your css might / should have been ‘wpmu’ instead of ‘wpmui’ – but that wasn’t it ??

I think the best chance is to override their css, or edit their avada-global.css file (which I can’t find).

Can you think of any other css override tricks ?

Thanks, David

Hey David,

I’ve checked your site and I don’t see a popup on your site anymore, did you by any chance disable that or am I missing something?

Please advise,
Bojan

Hi Bojan, yes it is there (for me anyway ??

On staging site running 4.8.0.0:
stage.wabisabiwell.com
(popup works on desktop, but on mobile only shows opaque background, no popup)

On main site running 4.7.1.1:
https://wabisabiwell.com
(popup works on both desktop and mobile ok)

Maybe you visited stage.wabisabiwell.com on mobile and therefore didn’t see it ?

Regards, David

Hey again David,

I see what’s the problem, can you please try adding the following CSS code as well:

@media only screen and (max-width: 800px) {
.wpmui-popup .popup {
    display: block !important;
}
}

This should fix the issue on smaller resolutions ??

let me know how that goes!

Cheeers,
Bojan

Hi Bojan,

I’ve added in that css you suggested, and now the popup DOES show on the mobile ??

But, for me anyway, it displays too wide now…

1. The close button in top right corner is almost impossible to access, as it is almost off the mobile desktop to the extreme right – can only see part of it. It’s like there is no padding/margin around outside of popup on mobile now.

2. Image is forced right to the top of the popup, there is no white space above, like on the desktop view.

Can you have a look and see if any further styling improvements are possible ?

Thanks, I really appreciate your help with this !

Regards, David

PS #1. You said to ‘try adding the following CSS code as well’ – “as well”, so I still have Predrag’s css in there, but it makes no difference with or without it.

PS #2. I also have some css that reduces popup width, but this makes no difference to mobile display issues.

/* Reduce max width of pop-up, default was 800px */
.wdpu-5774 .wdpu-msg { max-width: 600px !important; }

Hey again,

I’ve checked your site again and we should be able to slightly modify this so it fits your needs:

1. We can add some padding around the popup on different resolutions where it goes to full width so the button is always fully visible, please add the following:

@media screen and (max-width: 770px) and (min-width: 480px) {
.wdpu-5774.wpmui-popup {
    padding: 10px;
}
}

@media screen and (max-width: 480px) {
.wdpu-5774.wpmui-popup {
    padding: 10px;
}
}

2. To add some space above the image please add the following as well:

@media only screen and (max-width: 800px) {
.wdpu-5774 .wdpu-content {
    padding-top: 20px;
}
}

PS #1. You said to ‘try adding the following CSS code as well’ – “as well”, so I still have Predrag’s css in there, but it makes no difference with or without it.

Yes, I’ve talked to Predrag about this and he told me there is some other CSS that is overriding with that so that’s why I suggested to leave his code there.

PS #2. I also have some css that reduces popup width, but this makes no difference to mobile display issues.

You don’t need this ??

Cheers,
Bojan

Hi Bojan,
Thanks for staying with this ??
I added your extra CSS – it fixes the space above image, but the close button & right hand side of the popup is still off the screen on the right on mobile, for me anyway.

Can you please have a look on your side ?

1. I tried adding !important for the 2 x 10px padding rules, it didn’t work.

2. I thought the classes might be joined (.wdpu-5774.wpmui-popup) so I separated them (.wdpu-5774 .wpmui-popup) but that didn’t work either.

Regards David

Below is all the extra css I have now:

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: portrait) {
.wpmui-popup .popup {
display: block !important;
}
}

@media only screen and (max-width: 800px) {
.wpmui-popup .popup {
display: block !important;
}
}

@media screen and (max-width: 770px) and (min-width: 480px) {
.wdpu-5774.wpmui-popup {
padding: 10px;
}
}

@media screen and (max-width: 480px) {
.wdpu-5774.wpmui-popup {
padding: 10px;
}
}

@media only screen and (max-width: 800px) {
.wdpu-5774 .wdpu-content {
padding-top: 20px;
}
}

Hey again David,

We’re going to have to hack our way through this part as well as there is a script that is calculating popup position so with this padding added on smaller resolutions the popup appears as not centered, please try adding this as well:

@media only screen and (max-width: 630px) {
.resize.popup.wdpu-msg.move.wdev-window {
    left: 0 !important;
}
}

this will remove that positioning only on resolutions where popup is actually as big as the screen so it won’t affect desktop screens.

As for selectors you mentioned above that are not separated this is how it is supposed to be. You have them together like that when you’re adding multiple classes from the same element, I’ve added those to override existing styles with some specificity ??

Cheers,
Bojan

Hi Bojan,

That last css edit has done it – everything works perfectly now ??

Thanks so much for staying with this and sorting out my issues – unbelievable support !!

Kind regards,

David