How can I move my footer text to the bottom of my site and more towards the center? (FOR MOBILE SITE ONLY)
Also is there a way to resize the footer text to make it smaller for mobile site only?
URL: billon.maison
Theme: Origin
URL
Topic summary
A Shopify store owner using the Origin theme needs to reposition and resize footer text on mobile devices only. The footer copyright text needs to be centered and made smaller.
Initial Solution Provided:
- Add CSS to
section-footer.csstargeting screens under 749px - Adjust padding and font size for
.footer__copyrightand.copyright__content - This solution was accepted and worked
Follow-up Request:
The user now wants a sticky footer that scrolls with the page on mobile. Currently, when users scroll down, the footer remains fixed at its original position rather than staying at the bottom of the viewport.
Attempted Solutions:
- Adding
position: stickyto the footer - did not work - Alternative CSS adjusting footer padding - addresses original issue but not the sticky behavior
Current Status:
The centering and resizing issue is resolved, but the sticky/scrolling footer functionality remains unresolved. The user has provided a screenshot showing the footer circled in red, demonstrating how it doesn’t follow the scroll position on mobile.
Hello @MaisonBillonDon
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-footer.css
add this code at the end of the file and save.
@media screen and (max-width: 749px) {
.footer__copyright {
padding-left: 50px !important;
}
.copyright__content {
font-size: 0.8rem !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hello there @MaisonBillonDon You should check the marked solution in this previous thread and apply all the steps including copying and pasting the code https://community.shopify.com/c/shopify-design/how-can-i-fix-the-footer-issue-on-mobile-view/m-p/1838838
Feel free to let me know if this works for you
@Rahul_dhiman This solution worked but I have a new question.
Is there a way to make make the footer content a sticky footer so that way when I scroll up or down the footer also moves in the same direction?
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-footer.css
add this code at the end of the file and save.
@media screen and (max-width: 749px) {
.footer__copyright {
position: sticky !important;
}
}
Thanks
@Rahul_dhiman This didn’t work unfortunately.
Hi @MaisonBillonDon ,
You can follow the steps here:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there
Here is the code for step 3:
@media screen and (max-width: 768px){
footer.footer {
padding-inline: 5px !important;
}
}
Here is the result:
Please let me know if it works!
Best,
Daisy
@DaisyVo I already have a solution to this issue but do you know how I can make the footer move up and down when I scroll on the Mobile Site? Right now It just stays in one place so if someone scrolls down, the footer text is no longer at the bottom. I’ve included a photo of what the mobile site looks like when someone scrolls all the way down on the mobile site. I’ve circled the footer in red.
