Hi All, The checkout button is hidden by the toolbar on mobile, can the page size be reduced or the tool bar hidden? thanks
URL: https://label-source.co.uk/
Example below:
Topic summary
A user reports that the checkout button on their cart page is hidden behind the mobile toolbar, making it inaccessible to customers.
Proposed Solutions:
Three support representatives from different page builder platforms (GemPages, PageFly, and another service) each offered CSS-based fixes:
- GemPages: Add padding-bottom to
.cart-drawer .side-panel-innerand adjust.cart-drawer .order-note-toggle__content - PageFly: Insert custom CSS code in the theme.liquid file before the
</body>tag - Third solution: Modify the
component-cart-drawer.cssfile by adjusting.drawer__innerwidth properties
All solutions involve editing theme code files in the Shopify admin. Screenshots were provided to illustrate the implementation steps. The issue remains unresolved as the original poster has not confirmed which solution worked.
Hello @Danielparsons
It’s GemPages support team and glad to support you today.
I would like to give you a solution to support you.
-
Go to Online Store → Theme → Edit code.
-
Open your assets/app.css theme file.
-
Add the code at the end of the file:
body .cart-drawer .order-note-toggle__content{
bottom: -60px;
}
body .cart-drawer .side-panel-inner{
padding-bottom: 60px;
}
Hope my solution can work and support you!
Kind & Best regards!
GemPages Support Team.
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
Hope this answer helps.
Best regards,
Victor | PageFly
-
Go to the online store → Themes
-
Edit the code and search for component-cart-drawer.css
-
pasted the code
.drawer__inner{
width: 30rem;
}