Relume
Log in

Community forum for knowledge and support

Updated 9 months ago

Moving the Wireframe Over to Webflow: Exploring Padding, Margins, and Customizing Spacing

At a glance

The community member has questions about the use of "padding-global", "padding-section-large", "margin-bottom", and similar elements in their Webflow project. They want to understand the reasons for using these elements and how to adjust the spacing to be medium or small instead of large.

In the comments, another community member provides some answers. They suggest removing the "padding-section-large" class and adding the "padding-section-small" class instead. They also mention that the "padding-class-large" can be edited to reduce the padding, but they don't recommend reducing it to less than the "padding-section-medium".

Another community member explains that adding "margin-bottom" allows elements like "h1" or "collection-list-wrapper" to be repeated across different pages without all having the same bottom margin. If the margin was added directly to the element, it would change the element's style everywhere it appears.

The comments also suggest that the elements are designed to be as modular and granular as possible, allowing specific elements or components to be styled without affecting other elements that share the same classes.

SSaraLi Forouzanfar
·

Moving the wireframe over to webflow, I have a few questions:

  1. What is the reason for each section to have "padding-global" and "padding-section-large"?
  2. What is the point of adding the specific elements "margin-bottom" and similar elements, when we could just put padding or margins around the elements with actual stuff in them (text, images, buttons, etc.)? (this may be the same question as #1, I'm not sure)
  3. Is there a way to change the "padding-section-large" or any of the above elements I've named so that the white space isn't so...large? I'd like it o be medium or small but not sure how to do so.

E
B
4 comments
EEmily Marais

In relation to 3. You can remove the padding-section-large class and add the padding-section-small class. You can also edit the padding-class-large to reduce the padding, but I wouldn’t recommend reducing it to any less than the padding-section-medium

EEmily Marais

2. Adding margin-bottom allows elements such as h1 or collection-list-wrapper to be repeated across different pages without all having the same bottom margin. If you added it to the element itself it would change the element’s style everywhere that it appears

BBlair

Great answers from Emily.

BBlair

Basically every element is as modular and granular as possible. That way you can style specific elements or elements within components without affecting other elements that share the same classes as Emily said.

Add a reply
Sign up and join the conversation on Slack