---
title: "How to hide footer in mobile view"
slug: "how-to-hide-footer-in-mobile-view"
description: "When you have a detailed footer, it appears better only on large screens. In this case, the footer would not feel appealing on smaller screens. So you would want to remove the knowledge base footer in the mobile view for a better reader experience."
tags: ["Customization", "Knowledge base design"]
updated: 2026-06-20T09:58:03Z
published: 2026-06-20T09:58:03Z
canonical: "docs.document360.com/how-to-hide-footer-in-mobile-view"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to hide footer in mobile view

Custom footers with multiple columns, links, and branding elements are designed for wide desktop screens. On narrow mobile screens, the same footer can appear cramped, overflow its container, or take up a disproportionate amount of space, all of which detracts from the reading experience. Hiding the footer on mobile lets you keep a rich desktop footer while presenting a clean, uncluttered layout to readers on smaller screens.

> [!NOTE]
> NOTE
> 
> 
> 
> 
> This applies to **custom footers only**. It has no effect on the default Document360 footer. For information on setting up a custom footer, read the article on [Custom footer](https://docs.document360.com/docs/custom-footer).

---

## When to use this

Use this customization when you want to:

- Prevent a complex, multi-column custom footer from appearing broken or cramped on mobile screens.
- Improve the mobile reading experience by removing footer content that is not useful or accessible on small screens.
- Apply a responsive layout where the footer is visible on desktop but suppressed on mobile.

---

## Before you begin

- You need access to **Settings** (

) > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.
- A custom footer must already be configured on your knowledge base site. This CSS hides the footer on mobile, it does not create one.

---

## How to hide the footer in mobile view

1. Navigate to **Settings** (

) > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.

![Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)
2. From the left navigation pane, select the **CSS** tab and paste the following snippet.

Hides the footer on screens up to `767px` wide (smartphones and smaller tablets).

```
@media only screen and (max-width: 767px) {
    site-footer-section {
        display: none;
    }
}
```

1. Click **Save** at the top right.

![CSS tab showing the mobile footer hide snippet saved in the Custom CSS and JavaScript panel](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767005823666.png)

---

## Outcome

The footer is hidden on mobile screens and continues to display on desktop screens as usual.

![Before and after comparison showing the knowledge base site footer hidden on mobile after applying the CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767006022000.png)

---

## Best practices

- **Adjust the breakpoint to match your layout if needed.** If your custom footer starts looking problematic at a wider or narrower width than the default, change the `max-width` value in the snippet. For example, use `max-width: 1024px` to also hide the footer on tablets.
- **Test on a real device after saving.** Browser developer tools provide a reasonable mobile preview, but testing on an actual smartphone confirms the footer disappears at the right breakpoint and the page layout remains correct.
- **Consider what you are hiding.** If your custom footer contains important links, such as contact information, legal notices, or support links, ensure these are accessible to mobile readers through other means, such as the site header or article navigation.
- **To revert, delete the snippet.** Navigate back to the **CSS** tab in **Custom CSS & JavaScript**, remove the snippet, and click **Save**. The footer reappears on mobile immediately.