How can I center the footer layout on my website?

[smsigroup]

Good day!

https://hushpuppies.com.ph/

How to adjust the footer layout? The layout should be in the center

Thank you!

[sumanthjois1996]

I might be wrong but I think empty space is for the logo of all your payment providers. Maybe your theme has a option to disable it? If I were you, I would search for a way to disable payment icons in the footer to strart.

[smsigroup]

Hi@sumanthjois1996 

I will check on how to disable payment icons

Thank you!

[Sonya_2025]

Hi @smsigroup 

Pls follow these steps

1. Open your theme code eidtor

2. Find the footer.css from in your asset folder

3. Find the css class and make changes like below

If you find this information useful, a Like would be greatly appreciated.

[smsigroup]

Hi @Sonya_2025 

i will try to adjust

[sahilsharma9515]

Hi @smsigroup Please add the code in your theme.css/base.css/style.css file which is available in your theme.

footer.footer.bg-theme-bg.text-theme-text> .container {
    width: 121% !important;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
6. You can add the above code at the bottom of the file.

Result:

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[smsigroup]

Hi @sahilsharma9515 

i already paste the code, but same layout of the footer.

[sahilsharma9515]

Hi @smsigroup Can you please send me the screenshot where you have pasted it?

Also in this file you have pasted it?

Best Regards

Sahil

[smsigroup]

main.css

[sahilsharma9515]

Hi @smsigroup ok got it, just remove the code from there and

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 </body> tag

footer.footer.bg-theme-bg.text-theme-text>.container {
    width: 121% !important;
}

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[smsigroup]

Hi @sahilsharma9515 

this is the layout i want to do, i want to center all the footer.

[PageFly-Noah · Accepted solution]

This is Noah from PageFly - Shopify Page Builder App

 Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
@media (min-width: 1280px){
.footer__main .footer-col:nth-child(1){
    width: 25% !important;
}

.footer__main .footer-col:nth-child(2){
    width: 25% !important;
}
.footer__main .footer-col:nth-child(3){
    width: 25% !important;
}
.footer__main .footer-col:nth-child(4){
       display: flex !important;
    justify-content: flex-end !important;
}
}

@media (min-width: 1024px){
.footer-col--newsletter {
    flex: 0 1 550px !important;
}
}




</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[smsigroup]

Hi @PageFly-Noah ,

Thank you very much for your help.

[PageFly-Noah]

Thank you ! Have a nice day 😉