How to center all content within my footer?

[teemania]

Hello, my footer on my website is currently slightly to the left, it’s driving me insane. I’ve tried messing around with the section-footer.css but it’s not moving at all. Here is a link to my website: https://teemania.co/

[kai-nguyen]

Hi,

Please use this code:

.footer__content-top .footer__blocks-wrapper {
    display: flex;
    justify-content: space-between;
}
.footer__blocks-wrapper .footer-block {
    display: inline-block;
    width: auto;
    flex-grow: unset;
}

I hope this can help you. http://prntscr.com/dfkF70dylGy3

[Zqdo]

Go to your theme customizer, click on the footer, go to where it says “Add Custom CSS”, and see if this code helps:

.footer-block--menu{
text-align: center;
}

Does that work?

[Mike-Consentik]

Hi @teemania

This is Mike from Omega

You can try my solution

1. Open Theme → Edit code

2. Open base.css and paste this code below to the bottom of file, and Save

.footer-block.grid__item.footer-block--menu {
    text-align: center;
}

ul.footer-block__details-content.list-unstyled li {
    justify-content: center;
    display: flex;
}

Hope my answer will help you.

Mike from Omega

[INA_MSWEB]

Hi @teemania

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

.footer {text-align: center;}

.footer__content-bottom-wrapper {justify-content: center;}

Regards,

San

[oscprofessional]

Hello @teemania

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.footer__content-top {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

[made4Uo]

Hi @teemania

I see what you mean. To equally distribute the container and make the same space on each side, you can do the following.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

@media only screen and (min-width: 750px) {
.footer-block.grid__item.footer-block--menu, ul.footer-block__details-content.list-unstyled, h2.footer-block__heading  {
    width: max-content;
    max-width: max-content;
}

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    display: flex;
    justify-content: space-between;
}
}

See result: