A user is experiencing a layout issue on their Shopify store (Origin theme) where the footer appears in the middle of the product description on mobile view only. They want to push the footer to the bottom of the page while keeping desktop view unchanged.
Attempted Solution:
A CSS fix was suggested using position: fixed with a media query targeting mobile screens (max-width: 749px). However, this approach encountered problems:
Current Status:
The issue remains unresolved. The discussion is ongoing with the user seeking alternative solutions to fix the mobile footer positioning.
On my product page, on the mobile view, the header is in the middle of the product description paragraph. I want to move the footer to the very bottom of the product page but ONLY on the mobile view. How can I do this?
URL: https://billon.maison/products/rockera
Theme: Origin
Here is a screenshot of the mobile view of the product page:
Please add this code to Custom CSS in your Online Store > Themes > Customize > Theme settings
@media (max-width: 749px) {
html .shopify-section-group-footer-group {
position: fixed;
}
}
Hello @Dan-From-Ryviu It says the site cannot be published when I attempt to add that code. I’ve included a screen shot below.
Please add it to bottom of your base.css file
@Dan-From-Ryviu Unfortunately this didn’t change anything. Are there any other solutions?
