Preset Padding for container or inner container

It’s a good feature that we can preset the padding for the container in the theme style setting. Then when every time we add a new container, there will have padding already in it. If we don’t want to have padding for that container, we can remove the padding from the container we add in the site builder.

Thank you!

7 Likes

@luistinygod

Hope that you guys will check and review every single feature request in this forum.

Thank you!

Hi,

setting a default (root) container padding is a must have! It’s definitely easier to remove / override the default styles than typing them over and over again… on the other hand you can set up your “default” container as a template, import it and duplicate it as often as you like but that seems to be a bit odd instead of just clicking the “+” Icon.

Furthermore, a default padding will ensure a consistent look through the whole site, without having to worry about the values you used previously.

1 Like

Hi @timmse ,

It’s so troublesome if need to add the container from the template library. I prefer to be able to do preset in the theme style setting.

Oxygen Builder allows us to do this. But, I’m not too fond of the speed of Oxygen Builder. It takes forever to load.

Yeah @jornes, you’re absolutely right. If you place a “container” inside oxygen, the “inside wrapper” get’s inserted automatically with all your predefined styles (padding, max-width etc.). That is a pretty neat behavior instead of putting a container inside a container by hand to do the same.

Btw., the settings of the width of the container and the content are also kind of strange, right?
Maybe I don’t understand the approach (or the labels) correctly, but when I give the container 100% or 100vw width (in Theme Styles » General), the content 1200px (Theme Styles » Content) I expect the container to be full width and the content 1200px, but that is not the case.

If I do it the other way around, it works as intended (when placing a container inside a container)…

Yes. Correct.

About Content Width, I do this way. A main container with full width 100%. Then, I add a inner container and set my content width as 1400px.

Maybe, I’ll try different approach when I create my next site with Bricks.

Yep,

that’s the way to go - but that should also work via the theme styles - and after fiddling around it does.

For my understanding a “container” is a simple wrapper. The “content” is everything inside a container. If i look at the html, it’s the other way around: the containers are inside main#bricks-content - now it makes sense, but maybe the labelling isn’t quite obvious (or i’m too stupid).

See the video to know what i mean.

These theme style settings combined with a default padding and we’re good to go.

1 Like

Yes. It seems the container width and content max-width are not working as expected. See if they will do something about this.

As long as we get the container padding… :smiley:

1 Like

Yes. Preset padding for container. Will make workflow even better.

Hi @timmse

I have a slightly better workaround for you

You do not need to template it, you can create your base container, save it as a global element and then pin your global element to the top of the elements list. Then you can rename it (i think) so as not to confuse it it with your standard container element. :+1:

Ah just read further, yes - exactly haha, i thought the same with the container Vs. the content. So its back to front?

Hey Michael,
Thank you for the suggestion!

I just tried, we can’t save the container as Global Element.

Hi @Michael,

thanks for the suggestion. Maybe it worked out in a previous version of bricks, but like @jornes said, in 1.3.2 i can save the container only as a template :frowning:

I’m glad that i am not the only one who misunderstood the container vs content max width and to be honest, it still confuses me a bit. I think a need a break :sweat_smile:

1 Like

Someone liked this topic today and I am back to make an update.

With the class styling system, I can set the preset padding/margin with a CSS class.
Add a CLASS and set the padding/margin, apply to all the containers that need this global padding.

Hohoho!!!

3 Likes

The class system does help with this issue however it would be great if a ‘root container padding’ option could be added to the theme styles! While you can certainly use the class system or the code below, having the option in the theme styles would save some time.

.bricks-container.root {
    padding-left: 20px;
    padding-right: 20px;
}

Since Bricks doesn’t allow me to do this at the moment, so, I’ll use the class system as the alternative.