Removing Top Margin From Footer Only on Homepage

[Aaron-Mihell]

Hi,

I am trying to remove the top margin (set to 0px) from the footer, but have it only affect the homepage.

I am using the Ride theme.

URL: https://lycralab.myshopify.com/

If anyone could help, it would be greatly appreciated.

Thanks,

Aaron

[topnewyork]

Hi @Aaron-Mihell 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
  footer.footer.color-scheme-0245407c-fefe-443e-80c4-87012aefe9a5.gradient.section-sections--15823399977003__footer-padding {
    margin-top: 0rem !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[Aaron-Mihell]

Hi @topnewyork,

Thank for your reply.

I followed the steps you mentioned but unfortunately it affected the entire website instead of just the homepage. Is there a way to just target the homepage?

Thanks,

Aaron

[BiDeal-Discount]

Hi @Aaron-Mihell 

If you only want to set margin for homepage footer, let follow step :

- go to edit code your current theme, find the footer.liquid 

let add this condition to footer class:

{% if template == 'index' %} homepage-footer {% endif %}

and then add style for this class:

.homepage-footer {
    margin-top: 0px;
  }

[Aaron-Mihell]

Hi @BiDeal-Discount,

Thank for your reply.

This did work but only for the mobile version of the site. For some reason it reverts back to how it was when the page width is 750px and above.

Thanks,

Aaron

[BiDeal-Discount]

Hi @Aaron-Mihell 

You should add style of .homepage-footer outside of any @media . Let check carefully my attachment of previous comment

[Aaron-Mihell]

Hi @BiDeal-Discount,

I definitely added the code exactly as you showed in the screenshot.

[BiDeal-Discount]

did you apply to your store https://lycralab.myshopify.com/ ?
I've just check but don't see any class added on footer tag.

If not, please update to let me check on that

[Aaron-Mihell]

Apologies, I removed the code because I was testing.

I have added it back now.

[BiDeal-Discount · Accepted solution]

Oh I see it was overriden by another

Let adjust by this code:

.homepage-footer {
  margin-top: 0px !important;
}

[Aaron-Mihell]

@BiDeal-Discount

Thank you so much for your help, it works perfectly!