Skip to main content

Relume Community Icon

Home

Announcements
Feedback
Figma Support
General
Showcase
Webflow Support

Powered by Tightknit

How to Adjust Padding for Closer Sections in CSS

·Jul 03, 2024 12:30 PM

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.

How to Adjust Padding for Closer Sections in CSS | Relume Community

8 comments

· Sorted by Oldest

Emily M.
·
Bonus points if I can do this on one instance of a component
Samir T.
·
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
👌1
Matt J.
·
Emily M. 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.
Matt J.
·
gosh, I hope you understand what I mean but I wouldn't be surprised if you didnt haha.
Emily M.
·
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
Matt J.
·
Yeah for sure - also you can nest components too!
Matt J.
·
But id be carefully with nesting too deep though it’ll have some performance implications
Samir T.
·
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
💯1