Accordion footer spacing

Store Design
,
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

3

Sorry, printsofwhatever.com password: teunto

4 
@media (max-width: 749px) {
.footer__blocks-wrapper.grid.grid--1-col {
	margin-bottom: 0 !important;
}	
.footer__content-top {
	padding-bottom: 0 !important;
}
}
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

6

Thanks again, works perfectly.

7

no problem :slightly_smiling_face:

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.

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.