Hi, I’m trying to get the footer text on my store to be centered. It is centered when viewed on mobile, but it becomes right-aligned and off-center when viewed on a desktop.
Domain: www.etherealoasis.co
Theme: Dawn
Hi, I’m trying to get the footer text on my store to be centered. It is centered when viewed on mobile, but it becomes right-aligned and off-center when viewed on a desktop.
Domain: www.etherealoasis.co
Theme: Dawn
Hello @spacetimerider ,
You can follow these steps:
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
Hello @spacetimerider ,
We are AliReviews - an All-in-one solution to helps collect, showcase, and manage impactful reviews.
To center the footer text on your store on desktop, you can use CSS to adjust the alignment. Here’s how:
@media screen and (min-width: 769px) {
.site-footer__text {
text-align: center;
}
}
If you want to center the footer text on all screen sizes, including mobile, you can simplify the code by removing the media query, like this:
.site-footer__text {
text-align: center;
}
Hope these can helps, please let us know if you have any further questions, we’d love to assist.
Regards,
AliReviews team.
Hi, I apologize for not being specific. These solutions seem to center all text in the footer, but I’m trying to just center the text at the very bottom where the copyright info is. It’s in this section of the footer.liquid file:
<small>© {{ 'now' | date: "%Y" }} {{ "ETHEREAL OASIS" | link_to: routes.root_url }}</small>
<small>
Q
Powered by Psychedelic Sex Magick Q
</small>
<small>
Hello @spacetimerider ,
You can add the text-center class to the div element that contains the copyright text. Here’s how you can do it:
<small>
© {{ 'now' | date: "%Y" }} {{ "Your Store Name" | link_to: "/" }}
</small>
Add the text-center class to the div element, like this:
...
Hope it can helps
@spacetimerider
Put below css into theme.liquid file before closing Tag
@media (min-width: 750px ) {
.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright {
text-align: center !important;
}
.footer-block--newsletter .footer-block__newsletter {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.footer-block__newsletter:not(:only-child) .footer__newsletter {
justify-content: center;
align-items: center !important;
}
.footer-block--newsletter {
flex-direction: column;
align-items: center !important;
}
}
Hi @spacetimerider ,
This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:
@media screen and (min-width: 750px) {
.footer__content-bottom-wrapper {
justify-content: center !important;
}
.footer__copyright {
text-align: center !important;
}
}
I hope it would help you
Best regards,
Richard | PageFly
Works beautifully! Thank you!