How can I perfectly center my website footer?

[Stagtis]

 Hi I am trying to centre all the footer stuff. I've done some code but it's a bit janky and the subheadings are not completely centred. help would be appreciated!!

website: www.stagtis.com

[Made4uo-Ribe · Accepted solution]

Hi @Stagtis 

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media screen and (min-width: 750px){
.footer-block__details-content>li:not(:last-child) {
    margin-right: 0rem;
}
}
@media only screen and (max-width: 750px){
.footer a {
    justify-content: center;
}
}
</style>

And Save. 

Result:

 

Suggestion: Its better make the links titles bigger or bolder so it wont look like a subtitles. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Stagtis]

also, the subtitles don't center at all on mobile

[Made4uo-Ribe · Accepted solution]

Hi @Stagtis 

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media screen and (min-width: 750px){
.footer-block__details-content>li:not(:last-child) {
    margin-right: 0rem;
}
}
@media only screen and (max-width: 750px){
.footer a {
    justify-content: center;
}
}
</style>

And Save. 

Result:

 

Suggestion: Its better make the links titles bigger or bolder so it wont look like a subtitles. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Stagtis]

hi, thanks for the reply, but after adding it the was no change, any ideas why?

[Stagtis]

@Made4uo-Ribe 

[Made4uo-Ribe · Accepted solution]

oh, I thought you already align center. I just take out the margin on the right, cause the reason the subtitles are not properly align in the center. To center add this code to inside the <style> tag

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    text-align: center;
}

And Save.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Stagtis]

sorry I thought it'd messed up your code so I removed it. thanks so much, works great now @Made4uo-Ribe 

[Made4uo-Ribe]

That is good to hear. Welcome! Most of the time if the editor theme, cant reach your desire design leave it and mostly developers fix it to reach your desire design. If you keep changing them then there would be conflicts and wont be fix the problem.

[ZenoPageBuilder]

Hello @Stagtis 👋

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.footer-block__heading,
.footer-block__details-content {
    text-align: center !important;
}

The result

Hope that helps!

[Lars_Verstappen]

Hi, I try to centre the footer as well. But can't fine the base.css? It won't show up after I search.