> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use different banner layouts on mobile and desktop (New Version)

### Overview

Many Layout and Style controls support a **mobile override** so phones are not forced to use the desktop dialog.

On desktop you might use a **Wide** or **Box** notice. On a phone that same width can cover the product page. The New Banner lets you keep desktop as-is and choose a **Bar**, smaller size, or different position on mobile.

Overrides are stored as **Mobile same as desktop** vs **Mobile different from desktop**.

||| **New Banner.** For stores with the **New version** badge on **Settings > Banner**. On the Legacy Banner, see [How to switch to the new banner or switch back to the previous version](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-x1xdn9/).

### Before you start

* Confirm you are on **Settings > Banner** with the **New version** badge.
* Use the previewer **Desktop / Mobile** toggle while you edit. See [Using the Live Banner Preview mode](/en/article/using-the-live-banner-preview-mode-ye1lnv/).

### Set mobile independently

1. Open **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Go to **Settings > Banner**.
3. Open **Layout** (and **Style** if you also want different colors, padding, or logos on mobile).
4. Find a control that shows **Mobile same as desktop**.
5. Switch it to **Mobile different from desktop**.
6. Set the mobile value (appearance, position, size, button layout, and so on).
7. Repeat for each control you want to override.
8. Save.

![Cookie notice appearance, position, width, and mobile override icons](https://images.pandect.es/knowledge-base/how-to-use-different-banner-layouts-on-mobile-and-desktop-new-version-2.png =900xauto)

Common Layout overrides:

* Cookie notice **Appearance** (Box, Bar, Wide)
* **Position**
* **Width** (XS–XL)
* Button layout
* Preferences appearance (box, drawer, sidepanel)

Common Style overrides:

* Spacing, radius, and float
* Font size
* Button size

### Suggested mobile setup

* Prefer a **Bar** at the **bottom** on mobile so product images stay visible.
* Keep **Accept** and **Decline** on one row when you can.
* Check the **consent widget** position so it does not cover **Add to cart** or a chat bubble.

### Verify

1. Preview **Mobile** in the app.
2. Open the storefront on a phone or Chrome device mode.
3. Confirm both first visit (banner) and returning visit (widget).

### Related articles

* [Customizing the layout of the banner (New Version)](/en/article/customizing-the-layout-of-the-banner-new-version-wt79uc/)
* [How to customize banner style, colors, logos, and buttons (New Version)](/en/article/how-to-customize-banner-style-colors-logos-and-buttons-new-version-b1mh64/)