Mobile - dawn- footer overlaying product page

Shopify Discussion

Topic summary

A Shopify store owner using the Dawn theme is experiencing a footer overlay issue on mobile devices across all pages. They want to fix this problem while preserving the footer overlay effect on the homepage banner image.

Solutions Proposed:

  • PageFly-Oliver suggested adding CSS code (position: relative !important to .footer__content-bottom) in the footer-section.css file, but this affected both mobile and desktop versions.

  • SideNode provided a more targeted approach: adding custom CSS in the theme.liquid file that applies only to non-homepage templates using Liquid conditionals ({% unless template.name == 'index' %}). An initial error was corrected by changing the position property from fixed to the appropriate value.

Current Status:

The issue appears partially resolved - the footer now displays correctly on non-homepage pages, but the homepage footer has shifted to the middle of the page. The user confirmed this is the only remaining problem, with other pages working correctly.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hi,

The footer is overlaying all pages.

Is it possible to change all of them BUT the home page? I like that the footer is overlaying the banner image.

Thanks

Schermata 2023-09-13 alle 12.55.55.png
Schermata 2023-09-13 alle 12.55.55.png684×1058 86.5 KB

password: mieneefd

https://c168e5.myshopify.com/

2

Hi @danbot ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file footer-section.css

Step 3: Paste the below code at the bottom of the file → Save

.footer__content-bottom{position:relative !important}

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

3

Hi,

It’s only for the mobile version, all pages but the homepage.

Your solution is changing also desktop version.

:disappointed_face:

4

Hey @Danbot

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

Let me know if need further assistance
Regards,

5

Hi!

Thanks,

Is working in the other pages, now the homepage has the footer in the middle:

Schermata 2023-09-14 alle 13.38.44.png
Schermata 2023-09-14 alle 13.38.44.png716×1072 396 KB

I think is the only issue, the rest, perfect!

6

so sorry this is my mistake replace this css

SideNode_0-1694692119007.png
SideNode_0-1694692119007.png529×135 4.42 KB

.my-custom-class .footer__content-bottom {
  position: fixed!important;
}

use this so sorry

1 Like
7

Hi @danbot ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

{% unless template.name=='index' %}

{% endunless %}