Community forum for knowledge and support

Updated 6 months ago

Adjusting Padding Between Sections

I have two sections and I want them to be closer together. I can see the padding is set on padding-section-small, but I don't know how to remove just one half of the padding (i.e. the bottom or the top) without messing things up elsewhere.

E
S
M
8 comments

Bonus points if I can do this on one instance of a component

you can add a combo class padding-top or padding-bottom or even padding-0 if you want to remove the spacing from top and bottom at the same time

I think to do this on an instance of a component, you would want to make sure the component is the actual component without the padding wrappers, and then on a per instance basis, wrap the component on that page with the padding wrappers - if that makes sense? That way you have finer control over when there is padding and not since all you really should need in a component is the "content" of the component without the wrappers.

gosh, I hope you understand what I mean but I wouldn't be surprised if you didnt haha.

Yesss that does make sense! I guess I should change how i think of sections, from things that hold one component each, to things that can hold many

Yeah for sure - also you can nest components too!

But id be carefully with nesting too deep though it’ll have some performance implications

One other way is to use spacers and add a conditional visibility to them, inside the component. So each section will have a spacer-top and spacer-bottom and you'd be able to turn it on/off outside the component.
I personally find this to be the easiest to manage when you have multiple instances in the same listing

Add a reply
Sign up and join the conversation on Slack