pw:teunti
Topic summary
Issue: After implementing an accordion footer for mobile, the desktop/standard layout showed footer menu headings too close to the top. The requester wanted top padding applied only on non-mobile (where the accordion isn’t used).
Solutions provided:
- Theme code edit: Add CSS in theme.liquid (before ) to increase top padding on desktop only. Confirmed to fix the issue.
- No-code/Admin approach: Add Custom CSS in the Footer section using a media query so it only applies when the screen is wider than 750px (when the accordion disappears), e.g., target .footer__blocks-wrapper with padding-top. This also achieved the desired spacing and is advantageous if theme updates revert code edits.
Notes:
- The core tactic is a desktop-only media query (min-width: 750px) applying padding-top to the footer container.
Outcome: Resolved. Both methods work; the Custom CSS route is highlighted as update-safe and easy to manage.