digitalartcore

Hi @jarnovos,

Thanks for pointing me in the right direction.;-)

Change the “visibility” to “display: none” The elements have been removed and the placeholder is displayed correctly in all browsers (desktop and mobile devices)
Great!

But if you click on “Agree/Consent”, all hidden elements are displayed immediately – before the map or the store locator is loaded. That’s not really beautiful or elegant either.

Is there a possibility of adding a time delay or a function “document is loaded” after everything is shown?

Concerning the moving button: I notice that you didn’t define any CSS for the button class (button.wpgmza-api-consent cmplz-accept-marketing)?

It makes no difference whether I deactivate the preloader or Ajax on the theme (custom animation-related CSS delay), use a standard theme (such as Twenty-Twenty One) or “safe mode”.

The “button issue still persists”??? Do you have any other ideas?

I have created another pdf for you with a few screenshots of how it looks for me now.
https://www.stemprocks-loewenblut.de/complianz_WPGoogleMapsPro_01.pdf

Thanks for your help in advance…

Kind regards,
Frank

Hi @jarnovos,

Thanks for taking a closer look at this and your code or methods to fix it.

Placeholder & filter options placement prior to consent
The Custom CSS made it a little better but didn’t really fix the problem on Safari / Mobile.

Now the elements are hidden, but the positioning or the space around them has remained the same.

This is really strange behavior. On Desktop Safari: When I minimally scale the browser window, the placeholder jumps to the correct position.

On mobile device Safari: When I change the orientation from portrait to landscape and back, it is correct too. On (Chrome, Firefox, Edge and Opera) it loads exactly like this, but as soon as you start scrolling it jumps to the correct position immediately.

Any ideas what’s going on or what causes this?

Adding styles for the button
Thank you for the code snippet and alternative methods. I’ve tried it, but it doesn’t make any difference. As I can see, the Complianz Custom CSS is loaded into the header anyway.

Only if I use “button {}” instead of “button.wpgmza-api-consent.cmplz-accept-marketing {}” will the user agent stylesheet be overwritten. But of course this affects all buttons on the site and is not a solution.

In addition, I will also forward the issues of placeholder and button to the GoogleMaps support. Maybe they have an idea or a solution for this.

Thanks for your help in advance…

Kind regards,
Frank

Hi @jarnovos,

Thanks for your reply. Do you have a tip how I get the css into the header. It is currently placed in your “Cookie Banner Box / custom css”.

Could you also have a look at the placeholder image issue on Safari + mobile devices?

I have made a pdf for Aert with a few screenshots, how it looks on my end on safari desktop and mobile device (iPhone 11 pro) in portrait- / landscape format.

https://www.stemprocks-loewenblut.de/complianz_WPGoogleMapsPro.pdf

Thanks for your help in advance…

Kind regards,
Frank

Hey Aert,

Sorry for misspelling your name, I’m such a fool. ??

Cheers,
Frank

Hi Aret / @aahulsebos,

Thank you for your prompt reply. ??

I made a pdf with a few screenshots for you, how it looks on my end on safari desktop and mobile device (iPhone 11 pro) in portrait- / landscape format.

https://www.stemprocks-loewenblut.de/complianz_WPGoogleMapsPro.pdf

Thanks for your help in advance…

Best regards,
Frank

Hallo Andreas,
vielen lieben Dank für deine Antwort. Hab ich eben an euch gesendet.

Beste Grü?e
Frank