Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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:
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!
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!
also, the subtitles don't center at all on mobile
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:
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!
hi, thanks for the reply, but after adding it the was no change, any ideas why?
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!
sorry I thought it'd messed up your code so I removed it. thanks so much, works great now @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.
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!
Hi, I try to centre the footer as well. But can't fine the base.css? It won't show up after I search.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024