A user seeks to reduce footer font size on their mobile website (neverland-wine.com). An initial solution is provided: adding CSS code wrapped in <style> tags above the </body> tag in the theme.liquid file, targeting footer elements with font-size: 14px !important within a mobile media query.
Additional requests emerge:
An alternative solution suggests adding the same CSS code through Shopify’s Custom CSS section (Theme settings > Custom CSS), but this approach doesn’t address the layout changes requested.
Current status: The font size reduction works, but the layout restructuring remains unresolved. The user has shared a screenshot showing where they added the code, awaiting further guidance on achieving the column-based footer layout on mobile.
Hi! We’re trying to reduce the font size in the footer only of the mobile version of our website, which is currently looking like the snapshot below.
Is there any code we can insert in our footer CSS section to reduce the font size please? Our website is www.neverland-wine.com. Thanks!
Hey @neverlandvineya
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Amazing, thanks Moeed! It works, but now is there a way we can
Place the ‘Language’ menu and Social Media icons next to each other? and
Place the list of pages currently beneath the Social Media icons next to the list currently above the Social Media icons so that it looks like two columns next to each other?
Thank you!
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there
Here is the code for Step 3:
@media screen and (max-width: 768px){
footer.footer * {
font-size: 14px !important;
}
}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
Hi Daisy,
Thanks for your suggestion! Unfortunately the code suggested doesn’t change the layout of our footer on our mobile version of the website. If you have any other thoughts on this, we’d be grateful, if not, thank you either way!
May I see where you added the code from your end? It would be great if you can share the screenshot as well
