How do I keep the container stretched but the inner content no wider than the global content width?

Hi Dustin,
have a look here:

Best regards,
timmse

I’ve read it multiple times but it’s not quite making sense to me. It kind of does when using rows, but not columns. I’ll try it again but it’s just not clicking for some reason.

Option 1 and 2 aren’t working that way if the outer container is set to use columns, which is why I’m so confused. Option 3 will probably work but I’m confused why I need to set that every time, doesn’t that basically make the root container width a moot setting at that point if I need to be setting it manually each time too?

Hey Dustin,

Do you have a screenshot of the structure panel for that section that I could have look at? Not sure why you would want to use columns?

If this is what you mean,

It’s actually simple

<main container
  <content wrapper
    <left container
    <right container
  <container wrapper - close
<main container - close

For the main container, you will need to set stretch and then align cross assign to centre.

The container wrapper is the content width you want. Set the background colour for the main container.

Make sure you set wide in your theme setting.
Setting > Theme Styles > General > Site Layout > Wide

Root container width is the global content width you want.

I hope I get you correctly.

2 Likes

Hi @jornes - that did the trick, thank you so much! Based on what I learned from your post, it seems the missing piece in my case was just needing an extra container in there. Here’s a screenshot I’ve included here with the arrow pointing to what I needed to add but was missing before. What I was missing earlier was the container with the arrow next to it.

Now it is contained to the ‘root container width’ as expected.

@Michael - thank you for offering to help earlier, I love that you’re always willing to help so many people! Keep it up. :slight_smile:

@timmse, I’d like to recommend the documentation be updated on the use of containers as it seems a bit outdated with v1.4 out now, and a common use-case (I’d think anyways) is what I was trying to achieve here but it was not totally user-friendly in my opinion, and the documentation surrounding Bricks didn’t really help me out here, unfortunately. In fact the post you linked to earlier didn’t really help me here either in my case, as options 1 & 2 in that post didn’t appear to be relevant to when columns is set on the parent container, and option 3 is basically just manually setting the width to match the desired width instead, which in my opinion defeats part of the purpose for having a root container width set in the first place as a global theme style since the only time I should need to change the width of a container is specifically if I wanted to not adhere to the global theme style root container width. Right?

Perhaps it’s also because I’m coming from Oxygen & Elementor, so keeping full-width sections while keeping the content within the desired page width was always intuitive and easy to do, and it was in Bricks v1.3.7 too but suddenly v1.4 changed the game and I felt a little lost which caused some frustration as a user too when it was understandable to me earlier and suddenly changed in a way that I couldn’t quite connect. I guess this may be where 1.4.1 or something fixes that with the newer elements you’re considering so it’ll perhaps behave more similar to Oxygen and such in that regard.

1 Like

Glad it helped.

In Bricks, they don’t have a section element like Oxygen. So, you have to add every single container to yourself. But, if you get this concept clear, it should be easy to work with it. :blush:

Definitely helped. :slight_smile:

Yes, I think that’s a major difference between Bricks and the others currently. What threw me off is it all made sense to me in v1.3.7 but then 1.4 came along and threw me for a loop and practically all my sections (or containers) were stretched out, haha. Going to be a lot of cleanup work unfortunately, but that’s okay.

In my case, I actually used the new “Section” part (where if you click into a blank area on the page and click the little icon in the upper corner of the Container element it gives some pre-designed ones, and Section is one of them where it has a container and then another container within it to keep the formatted content width), so I was trying to use that in this case assuming that’d be what I’d need but then duplicating the inner container and also setting the parent container to be column direction instead of rows, but that didn’t work.

Didn’t realize I had to have the two inner containers in yet another container under the parent, haha. That was thankfully all I needed though and I feel a bit better about moving forward with more Bricks work for now. :slight_smile:

1 Like

I have to correct what I said earlier.
I said we have to add every container to the layout ourselves, which is wrong.

I have just tested the Full-Width Section, and it worked as I said in my post above. By default, it comes with a parent and a child container. The best thing is that we can still move the child container(if you wish to) to wherever we want. More flexible than Oxygen and Zion Builder.

Totally, that works as expected until you try to duplicate the inner container to get two and set the parent container to use columns instead of rows, that’s where it breaks down and caused me trouble, not realizing I needed to put the two inner containers inside of another container inside of the parent, lol. It gets confusing after a while. :sweat_smile: But I agree, I suspect this is even more flexible than the others, just takes some getting used to I guess.

Once you are clear about the concept then it’s easy to go(might be a little confusing for new users). Haha!

Definitely, it is more flexible than others because you can separate the parent container and child container and upgrade the child container to a parent container by moving off of its default parent container.

In Oxygen or Zion, you can’t separate them. Their relationship(parent and child) is so solid lol… :joy:

2 Likes

Interestingly, I was working more on the new site today and ran into another problem with my next section (container tagged as section) with inner container… leading to a similar problem and what I suspect is part of why I’m struggling so much since v1.4 was introduced, seems I may have stumbled into yet another bug… :frowning:

In my scenario, it seems that when adding Stretch to the Align-Container on a custom CSS class, it spreads everything out without respecting the content width setting. However, if I were to either remove that Stretch value on the custom CSS class and used it instead on the ID, it worked fine, even if it was on the ID and the custom Class (since the ID always overrides the custom class anyways). Effectively, I needed to use Stretch on the ID, no matter what, and it doesn’t seem to work when using a custom CSS class - basically seems completely broken when using that on a custom CSS class.

I think this is a bug and may even be related (or identical) to what was reported here too: https://forum.bricksbuilder.io/t/automatic-css-responsive-width-class-overwritten-by-the-section-stretched/3298 - “My problem (wanting to apply a width class to box the content while keeping everything responsive) is solved with the width variable being applied in “width” (and not in max-width) (but weirdly this solution works only on the ID level and doesn’t work when it’s in a custom class…)

I recorded my screen for review / confirmation and it can be viewed here: https://filesharing.d19.ca/f.php?h=304KWbnW&p=1

I think there’s been far too many of these kinds of weird issues since v1.4, and it’s really adding to a lot of frustration trying to design with it, unfortunately. I really want to use Bricks instead of Oxygen for my current project as I’d hate to have to re-do it back in Bricks so soon afterwards, but I’m really struggling with this since v1.4. Hoping v1.4.1 comes soon with these fixes as I’ve reported a few now in v1.4. In fact I had reported similar behaviour for the 1,.4 beta but seems they may have not been taken into account before the stable release. :cry:

Alright.
I have just followed what you described.

I added a class to the section and set stretch to it using a custom CSS class and I can replicate your issue. Yes. It worked with ID but not a class.

I have just tested. If you set stretch to the section with a class, it wouldn’t respect the global content width you have set to the theme settings. But, it does if you insert the content width to a class for the inner container.

But, I think that we should not need to do this this way. They definitely need to do something about it.

3 Likes

Hey Dustin,

Ah, no worries at all. I am a big believer in ‘pass it forward’ :slight_smile:

In relation to the current logic of the container in 1.4. it is something like this:

Based on having theme styles set up something similar like this:

Root Container With No Inner Wrapper (container)

The container will be fixed at 1400px with a 2.5rem padding on either side

Root Container (not stretched) With One Inner Wrapper (container)
Similar to the above the root container will be fixed at 1400px and the 2.5rem padding will be applied to the outer container

Root Container (stretched) With One Inner Wrapper (container)
The Root container will be full-width and the inner container will be 1400px. The padding is transferred from the root container to the inner container.

For your issue with the inner wrapper stretching too is to have a look at this thread here: I found out there is a custom class already added inside bricks called ‘stretch’. Just type stretch inside the add custom class box and it will show up. Apply it to the root container when the root container is set to stretch in the ‘align container’ setting. (this only needs to be added in stretched sections). :+1:

1 Like

This whole issue I’m having is horribly confusing, lol. So are we saying now then that Bricks adds a hidden custom class called “stretch” which is what’s interfering and creating this issue where Stretch isn’t working in a custom CSS class and must be applied to the ID? I’m a little confused and want to just make sure I understand. The behaviour I’m currently seeing seems like a bug. If its actually as designed and due to some hidden class being added without anyone knowing…. Aaarghh, that should have been documented too then, the docs are awful :triumph: :laughing:

1 Like

Haha, I think it is more of a band-aid than anything applied for 1.4, but even this does come with its flaws.

But to be fair, they have been open and upfront about it and acknowledged it. They are releasing two new elements relating to the container element, which ‘should’ solve it once and for all and, at the same time, will be a lot easier to understand and also give us a lot more flexibility. :muscle:

Yes I’m hoping 1.4.1 will fix all these issues, causing so much frustration during this build process since 1.4 IMO. Part of me almost wants to downgrade to 1.3.7 for now but I think 1.4.1 is supposed to be out within a couple weeks and either way I’ll probably be creating even more work for myself if I stay on 1.37 to then jump to 1.4.1. Just bad timing with this project happening, haha. Alternatively I may need to just stick to Oxygen for now but am really wanting to avoid that if I can. Love the QOL that Bricks has such as renaming classes and such because I’m someone who tends to change their mind on class naming schemes :sweat_smile:

Hi @timmse,

As you can see from the conversation above, there seem to be quite a few issues around containers right now (and from other threads). I just wanted to check-in to ask if these concerns would be addressed in the next release?

The main priority from this thread IMO is the width issues with regards to if stretch is used on a custom CSS class instead of an ID which creates issues and appears to override the root container width value.

I suppose to some degree some of the concerns may be resolved with the use of the newer section & div elements which I believe is coming in the next version too. Do we still expect that update to come out later this month if all goes well, by any chance? :crossed_fingers:

Hi Dustin, as I’ve said several times before, 1.4.1 will come with new elements that, at best, solve all your problems and are easier to use than the container alone. The update will most likely come later this month as announced.

Lol, I know you’ve said it a few times but that was more to do with normal width stuff of containers, that was well before I knew about the CSS stretch issues too where it just straight up doesn’t work if stretch is added to a CSS class instead of an ID. I wasn’t sure if that was really related to the new elements or not. So just pointing out the CSS issues too and hoping that’s included in the 1.4.1 fixes. :slight_smile: