Hi guys,
I need to fix the overlaping of the footer menu lables in Mobile View only. Before it was great, but I thing because of a global code given, it got affected.
Thank you,
Topic summary
A user is experiencing overlapping footer menu labels in mobile view on their Shopify store, which occurred after implementing a global code change. The issue was previously working correctly.
Proposed Solutions:
Two community members offered CSS fixes:
- Solution 1: Add custom CSS code to the
theme.liquidfile at the end - Solution 2: Insert CSS into
assets/base.cssfile, specifically targeting footer list items with a media query for screens up to 425px width, applying 43px right padding
Both solutions involve adding CSS code to theme files to adjust spacing/padding for mobile viewports. The discussion remains open with no confirmation of which solution resolved the issue.
step 01:
- Go to your Store > Theme > click to edit code.
- find this file "theme.liquid " and open.
step 02:
- Paste the code at the end of the file.
this idea helps you
Hallo @Alliance
You can add code by following these steps to change
- Go to Online Store → Theme → Edit code > assets > base.css
paste below code at bottom(base.css)
@media only screen and (max-width: 425px) {
li.site-footer__linklist-item {
padding-right: 43px !important;
}
}
If you require any further information, feel free to contact me.
Best regards,