Goal: reduce large white space between two “Image with text” sections in a Debutify-based Shopify store, with mobile compatibility.
Code-based suggestions:
Edit theme.scss.css to adjust section padding via the .box class (e.g., padding-top/bottom: 20px; desktop-only via media query, or padding: 15px). Location: end of theme.scss.css or inside a block before in theme.liquid.
General spacing fix: .section + .section { margin: 0 !important; } to remove gaps between adjacent sections.
Outcomes and caveats:
Initial .box padding changes didn’t help some users; the adjacent-section rule resolved it for one person.
A user noted their issue was different (gap below slideshow), implying different selectors may be needed.
Recent update (no-code option):
In the theme editor: Gear (settings) → Layout → “Space between template sections” to control spacing. Screenshots were central to these steps.
Availability varies by theme; one Dawn user first saw no effect but later reported success. Symmetry theme lacks this option, requiring CSS edits.
Status: no single universal fix. Action items: try the Layout setting; if unavailable/ineffective, target the correct section classes with CSS and verify on desktop and mobile.
Summarized with AI on December 19.
AI used: gpt-5.
There are two “Image with text sections” before the footer section. I want to reduce the white space between those two sections. But unable to do it. If anyone does it for me by inspecting elements, I will be grateful to him.
Make sure perfect for mobile devices.