Cookie Consent: CSS Center not applying on any other page than the global instance

Description

The cookie consent global instance has the correct centering on the page, however on every other page, the cookie pop up aligns to the left of the webpage, even though the CSS properties are telling it to align center.

When I’ve done a manual CSS override with !important, it centers correctly, but then this messes up mobile viewing, so I don’t want to use that as the solution.

Site URL

Hey @stefano!

The HTML for the Consent Pro elements appears to be correct. :thinking:

Could you check whether Per Page CSS is enabled in the Advanced publishing options of your site settings?

Webflow’s Per Page CSS feature removes styles that it believes aren’t used on a given page. In this case, the global banner is added only on the homepage and then injected dynamically into other pages at runtime. Since Webflow isn’t aware of this runtime behavior, it assumes the other pages don’t need the banner’s CSS and excludes it. As a result, when the banner is injected into another page, the required CSS isn’t present and the banner appears broken.

One possible fix is to disable the Global Banner option in the Consent Pro app and add the banner to each page manually. If you still prefer using a global banner, you can add it inside a Webflow Component (for example, the footer) that exists on all pages.

No, per page CSS is turned off, as I saw it came up in another thread. I can try doing the banner on an individual page basis, just surprised this is an error / no one else has had the issue.

Hey @stefano!

I do not remember another instance of this issue happening with perpage CSS off :thinking:

I see that the issues seem to be fixed on the staging domain. Could you share the fix? Did you re-generate the component, or did you go with custom CSS?