[Resolved] Make a div full width

Home Forums Support [Resolved] Make a div full width

Home Forums Support Make a div full width

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1066538
    Samuel

    Hello,

    I use a hook to insert after content stuffs like Related posts, Newsletter and Share Icons.

    Here is the code I use :

    <div class="after-content">
    <div class="related-post">
    	[rp4wp]
    </div>
    <div class="outro">
        <div class="col-1">
        <h3>Newsletter</h3>
        <iframe class="mj-w-res-iframe" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://app.mailjet.com/widget/iframe/4baN/jfs" width="100%"></iframe>
        <script type="text/javascript" src="https://app.mailjet.com/statics/js/iframeResizer.min.js"></script>
        </div>
        <div class="col-2">
        <h3>Partagez c'est la vie !</h3>
        [gp-social]</div>
    </div>
    </div>

    My content width is 765px. But I would love to display a full width background color to my “after-content” div ? Like a real full width, all screen width.

    To be more specific I want my content to stay with his 765px width, but background color to be full screen.

    Thanks,
    Samuel

    #1066586
    David
    Staff
    Customer Support

    Hi there,

    the after_content is within the content container so the only way is with some ‘hackish’ CSS.

    So this would be the markup:

    <div class="fullwidth-container">
        <div class="grid-container">
            <!--- HTML in here -->
        </div>
    </div>

    And this CSS for the fullwidth:

    .fullwidth-container {
        margin-left: calc(-100vw / 2 + 765px / 2);
        margin-right: calc(-100vw / 2 + 765px / 2);
        padding: 40px;
        box-sizing: boder-box;
        background-color: #ccc;
    }

    The grid-container class is the GP class that sets the container width and centers it.

    #1066610
    Samuel

    Thank David,

    Your solution is working on my online “test” website, but not on my local server where I’m working… this is really weird…

    #1066617
    Samuel

    Re,

    It seems that on local this max-width CSS is causing trouble :

    .no-sidebar:not(.generate-columns-activated) .inside-article > *, .no-sidebar #comments {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    }

    But in my online test website I don’t have this issue. The 2 websites are mirror.

    #1066624
    Samuel

    So,

    if I add

    max-width: 100vw !important;

    To your CSS proposal it works on local…

    But I don’t understand why this “no-sidebar” CSS is displaying on local and not online…

    Anyway, it works.

    Thanks

    #1066629
    David
    Staff
    Customer Support

    If the sites are identical then it should work or not work on both.
    Whats ‘not working’ on the local site?

    #1066641
    David
    Staff
    Customer Support

    That CSS you have looks like it come from a site import – check for it in Customizer > Additional CSS

    #1066656
    Samuel

    Oh thanks David, that was it ! I really never use the Customizer/Additional CSS as I use a child theme to customise everything… thanks a lot !

    #1066673
    David
    Staff
    Customer Support

    You’re welcome

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