Solved

How can I center the footer layout on my website?

smsigroup
Explorer
53 0 16

Good day!


https://hushpuppies.com.ph/


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

Thank you!

 

smsigroup_0-1713761824221.png

 

Accepted Solution (1)

PageFly-Noah
Astronaut
1079 197 215

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 13 (13)

sumanthjois1996
Shopify Partner
20 0 4

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.

PageCrafter - Build Beautiful Product Descriptions that Improve Conversion

DM me your product page and I will help you improve it for free.
smsigroup
Explorer
53 0 16

Hi@sumanthjois1996 

I will check on how to disable payment icons

Thank you!

Sonya_2025
Shopify Partner
147 18 29

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

 

Sonya_2025_0-1713764063955.png

 

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

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
PAY ME
smsigroup
Explorer
53 0 16

Hi @Sonya_2025 

i will try to adjust

sahilsharma9515
Shopify Partner
976 122 183

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:

sahilsharma9515_0-1713764599983.png

 

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


smsigroup
Explorer
53 0 16

Hi @sahilsharma9515 

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

sahilsharma9515
Shopify Partner
976 122 183

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


smsigroup
Explorer
53 0 16

main.css

 

smsigroup_1-1713768103759.png

 

sahilsharma9515
Shopify Partner
976 122 183

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


smsigroup
Explorer
53 0 16

Hi @sahilsharma9515 

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

smsigroup_0-1713770612134.png

 

PageFly-Noah
Astronaut
1079 197 215

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

smsigroup
Explorer
53 0 16

Hi @PageFly-Noah ,

Thank you very much for your help.

PageFly-Noah
Astronaut
1079 197 215

Thank you ! Have a nice day 😉

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.