Solved

How can I perfectly center my website footer?

Stagtis
Excursionist
52 0 12

Screenshot 2024-02-19 215553.png 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

Accepted Solutions (2)

Made4uo-Ribe
Shopify Partner
5370 1296 1587

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

Made4uoRibe_0-1708382662287.png Made4uoRibe_1-1708382696107.png

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
5370 1296 1587

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 9 (9)

Stagtis
Excursionist
52 0 12

also,Screenshot 2024-02-19 222759.png the subtitles don't center at all on mobile

Made4uo-Ribe
Shopify Partner
5370 1296 1587

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

Made4uoRibe_0-1708382662287.png Made4uoRibe_1-1708382696107.png

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Stagtis
Excursionist
52 0 12

hi, thanks for the reply, but after adding it the was no change, any ideas why?Screenshot 2024-02-19 225456.pngScreenshot 2024-02-19 225509.png

Stagtis
Excursionist
52 0 12
Made4uo-Ribe
Shopify Partner
5370 1296 1587

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Stagtis
Excursionist
52 0 12

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

Made4uo-Ribe
Shopify Partner
5370 1296 1587

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.

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


ZenoPageBuilder
Shopify Partner
1052 203 217

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

Screenshot 2024-02-20 at 08.02.15.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
Lars_Verstappen
Visitor
2 0 0

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