How can I fix the floating footer on the last page of my Brooklyn theme?

Store Design

Topic summary

Issue: In the Brooklyn (Shopify) theme, the footer appears to “float” mid-page on low-content pages (e.g., account/login). The goal is to keep the footer at the bottom only on such pages, without making it a sticky footer that follows during scroll.

Requests: Multiple replies asked for the store URL to inspect the issue.

Solution provided: Add a CSS rule in assets/theme.scss.liquid that, for screens ≥769px and non-home pages, sets .main-content padding-top and a viewport-based height (77vh). This increases the page’s content height so the footer sits at the bottom without sticking during scroll.

Technical context: A CSS media query limits the change to larger screens. The selector body:not(.template-index) confines the effect to non-index (non-home) pages. Using vh (viewport height) ensures consistent vertical space regardless of content length.

Outcome: The original poster confirmed the change resolved the problem.

Status: Resolved; no further action items or open questions noted.

Note: The code snippet is central to the fix.

Summarized with AI on March 2. AI used: gpt-5.
6

@vanessaliew

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (min-width: 769px){
body:not(.template-index) .main-content {
    padding-top: 80px;
    height: 77vh;
}
}