How to change mobile footer from vertical to horizontal?

Shopify Discussion

Topic summary

Goal: Make the mobile footer horizontal without changing desktop.

  • Fix delivered by adding custom CSS in theme.liquid (above ). Result confirmed, then refined with an update to reduce excess whitespace. Screenshots provided.

  • Footer layout to match reference images: guidance to edit/add Liquid in footer areas and place code; outcome matched target after changes. Result screenshots shared.

  • Different behavior for desktop vs mobile: implemented with added JS (above ) and CSS (above ) to control collapsible sections. An issue from duplicated scripts was resolved by keeping only one.

  • Further tweaks: code supplied to reorder footer items and adjust spacing between headings and lists; changes worked as requested.

  • Social media icons not showing: enabled in theme settings and added profile links; then moved the icon block upward on desktop via JS and styled via CSS. User confirmed improvements.

  • Blog images: user wants all images to auto-match the first image’s larger size and preserve resolution (like The Fashionography). Helper noted differing image sizes require CSS standardization; no final snippet provided.

  • Latest status: user requested a dropdown/accordion for product descriptions on a specific product. Awaiting guidance. Discussion ongoing. Images/screenshots are central to the solutions.

Summarized with AI on December 18. AI used: gpt-5.
41

@ntd0 , You can try with this code:


Hope this can help you :heart_eyes:
1 Like