Avada Forums Community Forum Adding back option to make a container full width on posts

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • brooke
    Participant
    Post count: 17

    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
    Participant
    Post count: 17

    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
    Participant
    Post count: 17

    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
    Participant
    Post count: 9

    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
    Participant
    Post count: 8

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

    ScotterMonkey
    Participant
    Post count: 8

    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
    Participant
    Post count: 9

    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
    Participant
    Post count: 1

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

    yasin1989
    Participant
    Post count: 2

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

    westbich
    Participant
    Post count: 1

    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
    Participant
    Post count: 4

    @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
    Participant
    Post count: 1

    Great!
    It works.
    Thank you.

    Lisa
    Participant
    Post count: 2

    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
    Participant
    Post count: 2

    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
    Participant
    Post count: 15

    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

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.