Shopify themes, liquid, logos, and UX
Hello, I’ve added a code for an accordion footer and the padding I’ve placed around my menu titles is fine. However when in the standard layout the menu headings are too close to the top.
How do I add padding to the top of the footer on the non-mobile version only?(or rather any version that won’t adopt the accordion)
Solved! Go to the solution
This is an accepted solution.
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
@media screen and (min-width: 750px) {
footer .footer__content-top {
padding-top: 5rem!important;
}
}
</style>
Result:
If it helps you, please like and mark it as the solution.
Best Regards 😊
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
This is an accepted solution.
Awesome! You can solve this by adding Custom CSS to the Footer in Admin.
This method adds padding to the top of footer__blocks-wrapper when the screen is wider than 750px (when your accordion disappears).
Once in Admin, click Footer and go to the side bar.
Add this Custom CSS:
For copy and paste:
@media (min-width: 750px) {
.footer__blocks-wrapper {
padding-top: 1.5rem;
}
}
This will achieve this:
Hope this helps!
Hi @PoW8!
Could you share your store password?
printsofwhatever.com
pw:teunti
This is an accepted solution.
Awesome! You can solve this by adding Custom CSS to the Footer in Admin.
This method adds padding to the top of footer__blocks-wrapper when the screen is wider than 750px (when your accordion disappears).
Once in Admin, click Footer and go to the side bar.
Add this Custom CSS:
For copy and paste:
@media (min-width: 750px) {
.footer__blocks-wrapper {
padding-top: 1.5rem;
}
}
This will achieve this:
Hope this helps!
Also valid. Especially in case Shopify updates start removing all code but custom CSS again.
This is an accepted solution.
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
@media screen and (min-width: 750px) {
footer .footer__content-top {
padding-top: 5rem!important;
}
}
</style>
Result:
If it helps you, please like and mark it as the solution.
Best Regards 😊
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Thanks, this does exactly what I needed.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024