How can I modify the CSS of my website footer?

Store Design

Topic summary

A user is unable to modify CSS properties (color, line-height) in their Shopify website footer despite adding code to section-footer.css.

Attempted Solution:

  • Added CSS targeting .footer-block__details-content with color and line-height properties, but changes didn’t apply.

Working Solution Provided:

  • Navigate to: Online Store → Theme → Edit Code
  • Locate base.css file
  • Add CSS code at the bottom targeting .footer-content__top a (for color) and .footer-block.grid__item.footer-block--menu (for text alignment)
  • Use !important flag to override existing styles

Outcome:
The user confirmed the solution worked successfully. The issue was resolved by placing the CSS in the correct file (base.css) rather than section-footer.css and using proper selectors with importance declarations.

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

Hi everybody,

I can’t change the CSS of Footer content (color, line-height …)

Please help,

My url: https://189ee3-2.myshopify.com/products/jacket

Screenshot.png
Screenshot.png1152×310 13.9 KB

2

Hi @collins276 ,

The relevant changes can go in file section-footer.css

But what exactly do you want to change ?

Thanks

Yash Garg

3

Yes, I went to Section-footer.css and add this

.footer-block__details-content{
  color: pink;
  line-height: 0.5rem
}

but nothing happened.

Can you take a look?

4

Hi @collins276

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file base.css

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

.footer-block.grid__item.footer-block–menu.scroll-trigger.animate–slide-in {

text-align: center !important;

}

.footer__content-top a {

color: red !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
5

Thank you :grinning_face:

6

You are welcome @collins276 :blush: