Adding back option to make a container full width on posts

[brooke]

#456463

I don’t know why, but Avada has chosen to not give you the option of making a container full width or site width on Post pages, only pages.
I need to have this option to make a 100% width hero image for each blog post. Does anyone know how to make the changes needed to allow this option in fusion builder when you click on the container settings?

[brooke]

#460076

Update – after speaking with avada support, there is no way to do this, even with CSS. I’m greatly disappointed, since this is a very common trend in blogs these days.
The alternative is to make the Post pages set to 100% interior width globally and then select ‘site width’ for all containers except the one I want to have a full width image.
However, that makes all the global settings full width – including meta, related posts, comments, etc. That just looks horrible. That certainly isn’t the way to go. I’m wondering if I can control these global attributes to be site width, despite setting the post page settings to 100% width. Anyone have experience with this?
I’m bummed that just a simple option of making a container 100% width isn’t doable on Posts like it is Pages. It’s just so common these days. I submitted a feature request using the button on the sidebar. I encourage you to do the same if you want this feature enabled.

[brooke]

#468471

New update:

If you make posts 100% width, all the global ‘widgets’ or sections at the bottom are full width, as I mentioned before (author bio, related posts, etc.) To fix this, support gave me CSS to restrict these globally controlled sections so they don’t go full browser width:

.fusion-meta-info, .fusion-sharing-box.fusion-single-sharing-box.share-box, section.about-author, section.related-posts, .comment-respond, .akismet_comment_form_privacy_notice {
max-width: 1100px;
margin: 20px auto;
padding: 0 15px;
}

My new problem, for some reason, is that the 100% content width option isn’t showing up on new PAGES anymore. That is so weird, I think it’s a bug….

[john816]

#538195

Brooke, thanks so much for this post. I’ve been trying to get full width containers to work on blog posts all night long and couldn’t understand what I was doing wrong. Now I know what’s going wrong.

And this sucks! I’m going to request the feature right now.

[ScotterMonkey]

#539948

I’m having the same problem. This is a big deal for me.

[ScotterMonkey]

#539961

I may have found a fix!
When editing a page, look on the right at the box titled “Page Attributes”.
For Template, pick “100% width”.
Update the page.
Then go into settings on your container and you will see 100% width is now there as an option!

[john816]

#540476

Yes, the original post says that it is possible with Pages and that the problem was that it was not possible with Posts.

However, I was just told that it IS possible to do so with Posts. The toggle just isn’t on the right in the Page Attributes dropdown.

It’s at the bottom of the page in the Fusion Page Options under the Post Tab. Look here: https://d.pr/i/Psj1FV

[pain91]

#559376

Hello everone
interior content width not showing on settings … some one know how to fix it

[yasin1989]

#649303

I’m having the same problem!
interior content width not showing on page settings … some one know how to fix it

[westbich]

#653553

Is anyone found a working solution for this? It is a shame that there’s no such option to input 100% width blocks by default as DIVI or TIPI builders have…

[john in dallas]

#680853

@ScotterMonkey provided a solution that worked for me to resolve my issue. I was working with Pages and couldn’t get 100% width – I can’t confirm if this resolves the Posts elements the same way – but it does work for the Pages. Thank you @ScotterMonkey!!

[Mahdi]

#694002

Great!
It works.
Thank you.

[Lisa]

#712741

That’s great. Thanks, @Brooke !

I would also recommend that you add the class “comments-container”. Otherwise the container where people have commented on your page will be 100%.

ORIGINAL CODE:

.fusion-meta-info, .fusion-sharing-box.fusion-single-sharing-box.share-box, section.about-author, section.related-posts, .comment-respond, .akismet_comment_form_privacy_notice {
max-width: 1100px;
margin: 20px auto;
padding: 0 15px;
}

MY RECOMMENDATION – add “, .comments-container” at the end:

.fusion-meta-info, .fusion-sharing-box.fusion-single-sharing-box.share-box, section.about-author, section.related-posts, .comment-respond, .akismet_comment_form_privacy_notice, .comments-container {
max-width: 1100px;
margin: 20px auto;
padding: 0 15px;
}

[jrockey]

#747813

Solution using a CSS hack

Isolate the hero img container class. I believe the default class for Avada blog posts heroes is .blog-post-hero

In your theme options, add the following custom css:

.blog-post-hero {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}

This should force the hero container (and hero image) outside of containing div using negative margins and some clever math.

Cheers, and happy Avada’ing

[8vasa8]

#870777

Hello,

I was using this from above but after some update sharing box is wide again. Can somebody update this please?

.fusion-meta-info, .fusion-sharing-box.fusion-single-sharing-box.share-box, section.about-author, section.related-posts, .comment-respond, .akismet_comment_form_privacy_notice, .comments-container {
max-width: 1100px;
margin: 20px auto;
padding: 0 15px;
}

Thanks

[Author]

Posts