SOLVED: Full width section / boxed inner container

[joa]

Hi!
If I set a section to full-width (100vw) to have a full-with background image,
how can I setup the inner container to be boxed by the Root Container Width?
It seems stupid by I’m struggling to figure that out.

I found this in the forum “If you want the inner containers to be contained (boxed) in the middle, you need to add another container to hold the two containers. So the most outer will be stretched, the child container will be centered (with content width), direction horizontal and the children of this will then be contained.” SOLVED: 2 inner containers inside stretched root, overides content width in theme styles
but it’s not working for me.

Thanks in advance for your help,
Jo

[Michael]

Hey Jo

There is no need to apply 100vw to the container. Use align container > flex stretch in the container element under the content tab.

To set up the root container width (fixed boxed width), go into theme styles and set it up similar to the image below:

You can also see I add padding, too, so on smaller screens, the content never touches the edges of the screen (2.5rem or 25px is usually a good size). But there is an issue as you have linked to with a workaround.

If you want to have a section with two containers, you would need to have a container that wraps the two containers to stop them from going full width. You will also need to apply a built-in class to the first container, which holds the inner container, which contains the two inner containers called ‘stretch.’

The structure would look like this if you wanted two 50% containers (ignore that one says image)

I hope that helps

[joa]

That helps a lot. I knew I was missing something simple… thank you very much for the detailed answer

[Michael]

No worries at all, glad you was able to make sense of it, as it felt every second word i typed was container haha.

@Michael

But there is an issue as you have linked to with a workaround.

Also, I read your link wrong this is what I referred to:

Unable to remove padding set in Themestyles from Container

Hi Stefan, That’s perfect and super helpful thank you! I was only 5-10 pages in so I will destroy it and recreate a new staging for when the new elements arrive .