Overriding the default --swift-content-padding

E-mail notifications

Justin Sjouw

Posted on 21/08/2025 11:45:41

Yes sorry, a question on this once more :-)

I'm implementing a design that uses a sort of "section header" basically a single column row with a colour scheme, with a text paragraph thas must be aligned in the center.

By default the row height is quite large, which seems to stem from the --swift-content-padding: 2rem;

I was able to create a seperate layout for the text paragraph where I reduce this heigth by adding a div : <div style="--swift-content-padding: 0.5rem;">

I could probably move that to the column, by adding a different ID and specifying the padding in CSS, but then if I want this reduced padding for all row types, I'm still creating quite a lot of stuff for 1 change.

Anything smart I'm forgetting or not understanding (again :-))

Replies

Nicolai Pedersen

Posted on 21/08/2025 12:42:51

Hi Justin

The row height is 0 if that is what you choose. So no need to touch the row at all.

When you apply a theme to a paragraph, default behavior is to add content padding as you have found - that sits on the content box of a paragraph/column.

You can override that behavior in different ways by adding CSS only.

Example 1:

This will set the content padding to .5 rem for all swift-v2_text items inside it.

data-dw-itemtype="swift-v2_text"] div{
--swift-content-padding:.5rem;
}

Example 2:

This will set the content padding to .5 rem if the containing row is set to no no top and bottom spacing and you have a swift-v2_text item inside it.

[data-dw-row-space-top="0"][data-dw-row-space-bottom="0"] [data-dw-itemtype="swift-v2_text"] div{
--swift-content-padding:.5rem;
}

Example 3:

This will set the content padding to .5 rem if the containing row is set to no no top and bottom spacing and you have a swift-v2_text item inside it and the column is using primary colorscheme.

[data-dw-row-space-top="0"][data-dw-row-space-bottom="0"] [data-dw-itemtype="swift-v2_text"][data-dw-colorscheme="primary"] div{
--swift-content-padding:.5rem;
}

These are just a few examples.

Anything is possible. You can do it if the first paragraph is green, the second is blue. Or if there is only one paragraph containing a H1 or more or less anything you can think of.

One thing is for sure - you do not need a style or a css class field :-)

Justin Sjouw

Posted on 21/08/2025 15:37:49

Awesome, thanks for the examples! I'll continue to brush up my css skills :-)

You must be logged in to post in the forum

Developer forum

Overriding the default --swift-content-padding

Replies