CSS issue on mobile Privacy forms

Privacy
1

Hi, I really like the Privacy forms that Piwik supply code for. However, I have problems with ad blockers that seem to prevent the CSS from loading.

For mobile, I have the following problems:

  1. The size does not adopt to mobile properly and is cut off to the right. I have solved this by setting maxwidth to 350 px which seem to work.

  2. There is no CSS loading when the page loads on mobile (see picture). However, the CSS loads immediately when I touch the screen (see picture)

  3. For the “I want my data form”, the block zooms in on mobile and is then cut off to the right.

This is the test page Johan PP test | Enea

consent-form-css-when-touching-trhe-screen-on-mobile
consent-form-css-when-touching-trhe-screen-on-mobile1170×2532 135 KB

Consent-form-no-css-on initial-mobile-page-load
Consent-form-no-css-on initial-mobile-page-load1170×2532 142 KB

any insights if you can confirm that this is a problem on your mobile devices and/or any suggestions how to fix this would be highly appreciated.

2

Hi there!

We noticed that you have a non-standard setup where the container and privacy templates are loaded asynchronously only in response to first user’s interaction. Is it set up in this way on purpose? If not, I would advise to modify that mechanism so that the container is always instantly fetched and initiated on each page.

When it comes to point 1 and 3 - could you try using auto margins and let me know if this fixes your issue?

3

Hi, thanks for your prompt reply. I think the container loading issue can be that we are using a performance optimization plugin. However, when I implemented the code in practice on our cookie policy page, the code was not in the first screen view, so that fixed the problem as people needed to scroll to see it. Cookie Policy | Enea

I also fixed the issue with the cut off on mobile by limiting the width to 350 px which actually work well also for desktop I think. So, I am good now. Thanks for your help and analysis.