Fix how the cookie banner sits on your page, layout by layout

Each TermsFeed Free Cookie Consent layout has a known way of covering or moving your content, with a fix in the configuration or in your CSS. The notice_banner_type option picks the layout: headline (the default), simple, interstitial, or standalone. The interstitial and standalone layouts are fixed elements that cover the whole page on purpose, so they never shift the layout.

Find the layout first. Right-click the consent banner, choose Inspect, and read the class of div#termsfeed-com---nb: termsfeed-com---nb-headline, termsfeed-com---nb-simple, termsfeed-com---nb-interstitial, or termsfeed-com---nb-standalone.

Problem 1: The headline bar pushes the page down

The headline layout sits in the page flow as the first element of <body>, so it pushes your content down when it appears. Cookie Consent adds it after the page has loaded, which counts as a layout shift in Cumulative Layout Shift (CLS), a Core Web Vitals metric.

Reload the page, and watch your content jump down by the height of the consent banner a moment after the page loads. Take the consent banner out of the page flow, or move it below your content.

Switch to "notice_banner_type": "simple", a fixed box in the bottom right corner that does not move any content. To keep the headline bar, set "notice_banner_append": "beforeend" instead, which places it after your footer. Visitors then see it only when they scroll to the end of the page. Compare the layouts in Cookie Banner Layouts.

Problem 2: The simple box covers a button on mobile

The simple layout is fixed to the bottom right corner at up to 50% of the screen width, and up to 80% on screens 600 pixels wide or less. On a phone, its padding and full-width buttons make it tall enough to cover a sticky "Add to cart" button, a chat button, or a cookie link in the footer.

Open the device toolbar in DevTools (Ctrl+Shift+M), pick a phone size, and reload. Look for a button you need under the consent banner. Make the box full width and shorter on small screens with this rule in your own stylesheet, which takes precedence over the built-in rule through its id selector.

@media (max-width: 600px) {
  #termsfeed-com---nb.termsfeed-com---nb-simple {
    left: 0;
    max-width: 100%;
  }
  #termsfeed-com---nb .cc-nb-main-container {
    padding: 1rem;
  }
}

Problem 3: Every layout becomes a small panel on very small screens

On screens 320 pixels wide or less, or 480 pixels high or less, every layout becomes a fixed, scrolling panel 200 pixels high at the bottom. A phone held sideways is often 480 pixels high or less, so the interstitial and standalone layouts turn into this panel too.

Set the device toolbar to a phone in landscape, such as 844 by 390 pixels, and reload. The panel covers the bottom of the page, and its text and buttons scroll inside it. With interstitial, the dark overlay still covers the rest of the page. This panel is how Cookie Consent works on very small screens, so keep it. Do not set a height in your CSS that cuts off its buttons.

Cookie Consent gives the consent banner a z-index above the browser limit, so Chrome uses the highest value, 2147483647. Any widget with that value shares its layer, and the element later in the page appears on top. With the default notice_banner_append value, afterbegin, a chat widget or a sticky header added after the consent banner with that value covers it.

Inspect the element on top in the Elements tab and read its z-index in the Computed pane. A value of 2147483647 points to this problem, because Chrome shows any larger value as 2147483647 there.

Lower the z-index of that widget in your stylesheet, such as #chat-widget { z-index: 2147483000 !important; }, and reload. The Preferences Center sits at the end of <body>, so it appears above widgets added before it first opens, because CSS stacks boxes of the same level in document order.

Cookie Consent resets the styles inside its consent banner and Preferences Center, but site rules with !important or a more specific selector still reach inside. A site rule such as button { width: 100% !important; } or a { text-transform: uppercase !important; } changes the dialogs as well as your page.

Inspect a button of the consent banner and read the Styles pane. A site rule that overrides a Cookie Consent rule there is the one at fault. Scope your rule so it skips the dialogs, or restore the value inside them with a rule whose selector starts with #termsfeed-com---nb or #termsfeed-com---preferences-center. Against a site rule with !important, the restoring rule needs !important too, because an important declaration takes precedence over every normal one, whatever the selector. Find every id and class to target in Free Cookie Consent DOM and CSS Reference.

A good layout shows the whole consent banner and all its buttons at every screen size, with nothing on top of it. Repeat the check after each change to the configuration or your CSS. Publish your change and clear any page cache first.

  1. Close every private window, open a new one, and open DevTools with F12.
  2. Load your page and confirm that the consent banner appears.
  3. Open the device toolbar and check a desktop size, a phone in portrait, and a phone in landscape.
  4. Confirm at each size that every button of the consent banner, such as "I agree" ("OK" in implied mode) and "Change my preferences", is visible and clickable.