Bricks Version: 1.4 Stable Browser: Chrome Latest OS: Windows 11
Not sure if this is a bug or normal container/class logic… But when you copy the styles of an ID to a custom class and then remove the styles from the ID the below occurs:
Theme styles has 2.5rem left & right padding
ID Styles - pre copy
Section:
Fullwidth container (no padding applied as stretched to full width)
Inner container (padding transferred from root container)
2 x inner containers
Class Styles after copying/pasting ID styles then removing ID styles
Section:
Fullwidth container (Padding now applied)
Inner container (no padding applied or transferred from root container)
2 x inner containers
update - This rule is removed after I copy and paste the ID styles to the custom class and then remove the ID styles:
The crucial point is the .stretch class. It takes care of the padding and the width of the inner container. However, since this is just a helper class, it doesn’t really exist “physically” (if you know what I mean). That’s why it doesn’t show up in the class dropdown and isn’t copied when you copy the styles of the ID.
After pasting the styles into your custom class and removing the styles of the ID, you can add the “stretch” class to the outer container. Then everything behaves exactly the same as when you style on the ID - assuming I understood everything correctly (it’s been a long day so far)
Hi Michael,
Thanks for the video! I may not have been clear enough:
After removing the ID styles, click the Class Input field, add “stretch” (without quotes), and press enter. After that everything should be as before.
The crucial point is the .stretch class, which gets not copied (as it is a class and not a style), unlike the stretch option and the styles attached. “.stretch” is a helper class, which only tells the next inner container what to do (not to become as wide as the stretched container and apply the padding there, instead of the stretched .root). If you inspect the source code before and after removing the ID styles, you’ll notice that there is no .stretch on your container anymore.
@timmse Would it be possible for bricks to automatically add the .stretch class to all root containers that are set to stretch via a class in a future release? Bricks does this for root containers set to stretch via id — why not via class? And via other methods?
I see a lot of confusion around these full-width containers floating in various forum posts. Many suggest setting a max-width in the inner container which of course isn’t the correct way to solve this (since it’s not linked to the root width). Adding .root class to the inner container also works, but I guess also isn’t the right way to do this.
Hi faebe,
this will no longer be a problem in the next version, as all .stretch containers will be replaced by the section element (automatically via the converter), which will generally always have 100% width. In it, you can then place the container that keeps your content “in shape” (if you want your content to be max a specific width), and in the containers, you can then use regular divs.
This way every element has a purpose and we can do without all this class wizardry