gap in footer accordion - mobile view - dawn theme

Shopify Discussion

Topic summary

Main issue: On mobile, closing a footer accordion removes the vertical gap between sections (e.g., ā€œHelp centreā€ and ā€œAuthentic Leatherā€), while the gap exists when the accordion is open. Screenshots are central to understanding the visual spacing problem.

Proposed solution: Adjust the mobile CSS media query to add bottom margin to footer blocks. Specifically, in the @media (max-width: 749px) rule, set:

  • .grid .footer-block.grid__item { margin: 0 0 25px 0; }

Context: A media query targets styles for small screens; max-width: 749px corresponds to mobile in Dawn. This change ensures consistent spacing even when the accordion is closed.

Implementation details: Locate and edit the CSS in the themeā€™s stylesheet (base.css, style.css, or theme.css), depending on where the theme stores styles.

Outcome/status: Before/after links indicate the fix creates the desired gap on mobile. No conflicting views were raised, and the solution appears sufficient; confirmation from the original poster is pending.

Summarized with AI on January 18. AI used: gpt-5.
1

hi guys can someone help me? i recently changed my site view and noticed there in no gap when i close(-)(+) my accordion thing, only in mobile view.

as in screenshot provided. you can see highlighted spot where there is a can when accordion is open, but when i close it, gab disappear. is there any way to maintain the same gap even when we close the accordion? url : deshoeshop .com

with the gap
with the gap1290Ɨ1878 124 KB

no gap when closed
no gap when closed1290Ɨ2040 133 KB

1 Like
2

Hello @DSS5 ,

I understand that you are looking to provide a gap between the ā€˜Help centreā€™ and ā€˜Authentic Leatherā€™ section when the help centre section is close. https://prnt.sc/Iyyi64gOhyMt

The problem can be resolved by just making some small changes in your existing media query code. You have to change the ā€˜marginā€™ in this code.

@media (max-width: 749px)
.grid .footer-block.grid__item
{
margin: 0px 0px 25px 0px;
}

You can see when I change the code, small gap will appear between both the sections. https://prnt.sc/4AavrEsOuA1p

You can find this media query code in base.css/style.css/theme.css file depending where your theme store its CSS style files.

I hope it helps.

Please let me know if you need any further assistance

Thank you.