SOLVED: Container padding

1

EDIT: In case anyone in the future has the same issue: I had applied to my Theme styles but hadnt added the condition to make sure it was applying to the page on the front end. So while the backend was using those theme styles, I had to go to Settings->Theme Styles->Conditions and set conditions to apply it to the page i was working on.

Didnt want to mark as bug as i am very unfamiliar/ just learning bricks but this seems strange.

If i set default theme styles on Container Padding, It says it is set in the theme styles.

Screenshot 2024-08-23 at 8.38.37 PM
Screenshot 2024-08-23 at 8.38.37 PM444×1200 39.3 KB

Then when i look at my instance of a container on the page, it says it has that default padding (although it is written in pixels, my variable sets spacing-2 at 2rem so the numbers line up. In the editor the padding exists.

Screenshot 2024-08-23 at 8.38.57 PM
Screenshot 2024-08-23 at 8.38.57 PM2872×1202 212 KB

However once i save and look on the front end, this container has no padding and no padding styles applied at all.

Screenshot 2024-08-23 at 8.37.46 PM
Screenshot 2024-08-23 at 8.37.46 PM1920×886 129 KB

I didnt have this issue with the header of footer as i was explicily setting padding on the container itself, hadnt yet set the theme styles default container padding . Bug or feature? Any way to fix it?

2

In most cases you’ll want to be adding the padding to the section, not the container. Otherwise you’re changing the max-width of the content inside.

for example if your default container width is 1200px, if you add the padding to the section instead it will make sure the content actually has a max width of 1200px, the left/right padding will be setting the gap for smaller devices. whereas if you add padding to the container, the width of the content inside will now be less than 1200px.

3

Ah that makes sense, I never thought about it in the context of it narrowing the content -box max-width. Thanks!