Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: centering footer

Solved

How can I perfectly center my website footer?

Stagtis
Explorer
65 0 15

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
9073 2167 2675

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Made4uo-Ribe
Shopify Partner
9073 2167 2675

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 9 (9)

Stagtis
Explorer
65 0 15

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

Made4uo-Ribe
Shopify Partner
9073 2167 2675

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Stagtis
Explorer
65 0 15

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
Explorer
65 0 15
Made4uo-Ribe
Shopify Partner
9073 2167 2675

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Stagtis
Explorer
65 0 15

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
9073 2167 2675

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.

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

ZenoPageBuilder
Shopify Partner
1052 203 227

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.