Solved

How to customize footer?

RyanRichie
Excursionist
16 0 5

1. I've attached a photo of my footer, I'm having a hard time figuring out how to adjust the spacing, as you can see it isn't even. I think by making the subscribe part wider it would even out the bar a little bit.

 

2. Also the very bottom section with "about us disclaimer etc." I am trying to get it centered.

I've been trying a few different codes, one for centering but it brings it all the way to the left. 

 

Screenshot 2024-05-14 093347.png

Thank You, Ryan Richard
Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2031 586 461

This is an accepted solution.

Hey @RyanRichie

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    .site-footer-blocks.column-count-3 {
        display: grid;
        grid-template-columns: 1fr 0.8fr 0.8fr;
    }
    
    .site-footer-block-item {
        width: 100% !important;
    }
    
    .site-footer__row.site-footer__row--second * {
        text-align: center;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1715696309221.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 2 (2)

ThePrimeWeb
Shopify Partner
2031 586 461

This is an accepted solution.

Hey @RyanRichie

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    .site-footer-blocks.column-count-3 {
        display: grid;
        grid-template-columns: 1fr 0.8fr 0.8fr;
    }
    
    .site-footer-block-item {
        width: 100% !important;
    }
    
    .site-footer__row.site-footer__row--second * {
        text-align: center;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1715696309221.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
RyanRichie
Excursionist
16 0 5

thank you! 

Thank You, Ryan Richard