Hi @Made4uo-Ribe , I tried using this code for my store and it worked for desktop view. However in mobile view, the newsletter box is too large and cut off at the right and the social media icons are too far below the newsletter. Is there a way to modify the code you provided so it looks the same in desktop and mobile?
Topic summary
Goal: rearrange the footer so the Email Signup sits inline with other footer menus, Social icons appear directly beneath it, and footer columns are better spaced.
What worked (desktop):
- Added CSS in theme assets to make the footer a flex layout, set newsletter block width/margins, align social icons, and adjust column gaps. Result: Email Signup moved inline; layout cleaned up.
Mobile behavior:
- To keep the original stacked layout on phones, all desktop rules were wrapped in @media (min-width: 749px).
- For the Refresh theme, a mobile-specific tweak (flex-direction: column-reverse) placed the Email Signup above the links; confirmed working.
Additional requests/issues:
- Wider first column (fit ~5 lines) and narrower others: requested; no final code shared.
- Crave theme: proposed CSS to put social icons under signup and widen the first column didn’t take effect.
- Another store saw oversized newsletter and large spacing on mobile; advised that theme/store code differs and a URL is needed to tailor CSS.
- Further alignment (e.g., centering links or right-aligning signup) may need extra CSS and possibly Liquid/schema edits.
Status: Partially solved; desktop and some mobile ordering fixed. Theme-specific adjustments remain open and require store access. Images/screenshots helped illustrate targets; code access was needed for precise fixes.
1 Like