Accordion footer spacing

Store Design
,

Topic summary

A user is implementing accordion functionality in their footer on the Origin theme for mobile devices (max-width: 749px). They shared CSS and JavaScript code to create collapsible footer sections with +/- indicators.

Issue identified: Unwanted bottom spacing/margin remained after implementing the accordion.

Solution provided: Add the following CSS to remove the extra space:

.footer__blocks-wrapper.grid.grid--1-col {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.footer__content-top {
  margin-bottom: 0 !important;
}

Follow-up request: The user asked how to make the accordion opening/closing animation smoother instead of abrupt.

Suggested approach: Implement CSS transition properties on the accordion elements when they expand or collapse. The discussion remains open regarding specific transition code implementation.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1
@media (max-width: 749px) { .grid .footer-block.grid__item { margin: 0; } .grid .footer-block__heading { position: relative; margin: 0; padding: 1.5rem 0; cursor: pointer; } .grid .footer-block__heading::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; text-align: center; } .grid .footer-block__heading:not(.block-collapsed)::after { content: "-"; } .grid .footer-block__heading.block-collapsed + .footer-block__details-content { visibility: hidden; opacity: 0; height: 0; margin: 0; padding: 0; transition: all .2s ease-out; overflow: hidden; } .grid .footer-block__heading + .footer-block__details-content { visibility: visible; opacity: 1; height: auto; transition: all .2s ease-out; overflow: hidden; margin-bottom: 3rem; } }

Hello, currently using this code for an accordion footer on the Origin theme. What would need to be added to remove this space?

IMG_4080.jpeg
IMG_4080.jpeg1170×2532 135 KB

2

@PoW8

there will be some margin on the bottom that needs to be remove, if you provide the url i can share the code with you to remove the space.

thanks

1 Like
3

Sorry, printsofwhatever.com password: teunto

1 Like
4 
@media (max-width: 749px) {
.footer__blocks-wrapper.grid.grid--1-col {
	margin-bottom: 0 !important;
}	
.footer__content-top {
	padding-bottom: 0 !important;
}
}
1 Like
5

Result

2024-04-08 20_11_20-Prints of Whatever — Mozilla Firefox.png
2024-04-08 20_11_20-Prints of Whatever — Mozilla Firefox.png482×847 24.7 KB

1 Like
6

Thanks again, works perfectly.

1 Like
7

no problem :slightly_smiling_face:

1 Like
8

If it’s not too much trouble, do you know what I’d have to add to make the opening of the accordion smoother? Instead of being so abrupt.

1 Like
9

@PoW8

you can write some css transition code for your accordion once the object is expand or collapse. Hopefully you have idea of adding css or transition in CSS.

1 Like