> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/footer-group/footer-styling.md).

# Footer Styling

![Footer styling settings — width, color scheme, background, and spacing controls](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-557918965180ab8740d7273eb96f174ae2a60b3c%2Ffooter-group-footer-styling.png?alt=media)

***

## Width

Controls how far the footer content extends horizontally.

* **Page** — keeps the footer content within the page width set in your theme settings.
* **Full** — stretches the footer content across the full browser width, with a small space at the edges.

***

## Color Scheme

Sets the background, text, and border colors for the entire footer. The footer does not inherit color from the page — always assign an explicit color scheme.

***

## Top Divider

Adds a thin horizontal rule above the footer to visually separate it from the page content above.

***

## Background

Supports an optional image or video background, configurable with an overlay and backdrop blur.

* **None** — no background media; color scheme handles the background.
* **Image** — upload separate images for **Desktop** and **Mobile (optional)** to optimise each breakpoint independently. Enable **Overlay** and set an overlay color (with opacity) to improve text legibility against the image. **Backdrop blur** softens the area behind the overlay.
* **Video** — select a Shopify-hosted video. The video loops silently. Enable **Overlay** and set an overlay color (with opacity) to improve text legibility against the video. **Backdrop blur** softens the area behind the overlay.

***

## Gap

Vertical spacing between **Row** blocks stacked inside the footer.

* **Desktop** — vertical spacing between rows on desktop.
* **Mobile** — vertical spacing between rows on mobile.

***

## Padding

Controls the outer vertical spacing around the footer content area.

* **Padding top / bottom** — outer vertical spacing around the footer content.
* Enable **Custom for mobile** to set independent top and bottom values for small screens.

***

## Scroll Reveal

When enabled, the footer sticks to the bottom of the viewport and the page content scrolls over it — the footer is revealed as the visitor reaches the bottom of the page.

{% hint style="info" %}
Scroll reveal activates only on desktop (viewport ≥ 1025px) and only when the page is tall enough (at least 1.5× the viewport height). If the footer height plus the header height exceeds the viewport, the effect is suppressed automatically to prevent clipping.
{% endhint %}