Set width for content inside 100% width container

[nicolethompson11]

#551723

I see throughout the Avada demos that you can have a 100% width section on a page but have the content inside it only span the site width but I can’t figure out how to do this.

i.e. have the background colour span the full width of the browser but have the content within the section only span the site width.

I don’t seem to be able to place a container within a container as the shortcode just breaks.

i.e. creating a ‘100% width’ container then putting a ‘site width’ container inside it causes both containers to break.

It doesn’t appear as though the Avada demo uses padding to do this and that doesn’t seem the best approach, so I’d rather not do it that way.

Please advise how I can achieve this result as it seems like it should be simple.

[nicolethompson11]

#551724

e.g. on the Container page every single 100% width container has the content inside only spanning the site width:

https://avada.theme-fusion.com/container/

But I can’t figure out how to do this.

[dkepniss]

#562142

I am having this exact same problem. I can certainly adjust padding, but that is not a robust solution given the variety of screen sizes. I’d really like to know the answer.

[Michael C]

#562283

Both of you have active support, so if you require assistance you can always submit a support ticket from here – https://theme-fusion.com/support/submit-a-ticket/

You can also import a full demo or demo page to see how this is achieved.

In general you need:

• Set page template to 100% width
• Add a full width container
• Make sure Interior Content Width is set to Site Width for the container
• Set the site width in the Theme Options (this is the width of the content inside the container)

You can find more details about the container element here – https://theme-fusion.com/documentation/fusion-builder/elements/container-element/

[keplerterra]

#635913

Make sure Interior Content Width is set to Site Width for the container

I don’t have this option in my container setting window.
I have imported a page from demo, the option exists. Actually the

hundred_percent=”yes”

doesn’t work for the pages I created.

[marklchaves]

#635954

You mean something like this?

https://marklchaves.com/full-width-test/

[exceladvisors]

#646579

I am also seeking information on how to do this.

@Michael C we shouldn’t have to open support for lots of things like this.
I would have thought there was already an FAQ on this somewhere.

Otherwise, if someone posts the answer here, we can all benefit without wasting the support resources.

[exceladvisors]

#646580

Btw following these steps means that all the content for that contain is site-width not just the background.

In general you need:

Set page template to 100% width
Add a full width container
Make sure Interior Content Width is set to Site Width for the container
Set the site width in the Theme Options (this is the width of the content inside the container)

Any other ideas on just getting the container background to go wide and no the container content?

[exceladvisors]

#646582

Found it. Cross-posting as this was the solution thread that came up first for me.

https://theme-fusion.com/forums/topic/set-container-background-full-width/#post-646581

[Citymedia]

#652634

And now? –> There is no way to publish an image in fusion builder with 100% width
Shame to Avada Timewaster

[HankWong]

#699205

I am a User in China. Could anyone help me solve this problem by illustration or video? I set any 100% widths I found. But it can’t work.

[uximo]

#717142

There was a similar problem.
Found a solution in the page properties
Screenshot in Russian, but I think you’ll figure it out knowing where to look for a solution.

https://a.radikal.ru/a05/2003/8b/48927272481d.png

[vincent.egreens]

#734681

I used CSS to solve this problem.

.hundred-percent-fullwidth .fusion-row{max-width:1100px!important;}

1100px is my site width.

[cranecomposites]

#779245

What about individual column width, I am trying to adjust that with standard HTML code but it is not working

[mikecooter]

#821041

Had the same problem, the part I missed was the Avada Page Options ‘Layout’ setting.

In summary:
Page template = 100% Width
Container > Interior Content Width = Site Width
Avada page Options Layout > Layout = Wide (NOT Boxed)

[Author]

Posts