1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Sidebar width issue: Content should be wider

Discussion in 'Free Divi Community Forum' started by chrisF, Jun 3, 2024.

  1. chrisF

    chrisF New Member

    Hello

    I've tried a lot of different CSS to change the width and padding but nothing works. There is a lot of space on the right side of the widget area, sidebar, the widgets are not 100% of the sidebar.

    upload_2024-6-3_18-6-1.png

    upload_2024-6-3_18-7-41.png

    I'd llke it to be in this space here with less padding on the right. I've inspected the element and tried to edit it with various code:

    /* Adjusting the sidebar to fill the space */
    #sidebar {
    width: 100%; /* Ensure the sidebar takes up the full width of its container */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
    }


    and then I tried this:
    /* Target the sidebar container */
    #sidebar {
    width: 100%; /* Ensure the sidebar takes up the full width of its container */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
    }
    /* Target the widget elements inside the sidebar */
    #sidebar .et_pb_widget {
    width: 100%; /* Ensure each widget takes up the full width of the sidebar */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
    float: none; /* Prevent floating */
    }


    and so on...

    /* Ensure the main container takes the full width */
    #content-area.clearfix {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0;
    margin: 0;
    }
    /* Ensure the sidebar takes the full width of its parent */
    #sidebar {
    flex: 1; /* Allows the sidebar to take available space */
    padding: 0;
    margin: 0;
    }
    /* Ensure each widget inside the sidebar takes the full width */
    #sidebar .et_pb_widget {
    width: 100%;
    padding: 0;
    margin: 0;
    float: none;
    }



    but still it is just not working in the way I would like, I just want to reduce the huge gap on the right hand side for blog posts only.
     
    #1 chrisF, Jun 3, 2024
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  2. Divi Booster

    Divi Booster Divi Expert

    Hi Chris,

    I think the main thing that will be stopping your code from working is that Divi sets a "max-width" on the content container, which will constrain the total width of the content even if the "width" is set to 100%. You can control this max width in the customizer, but it's a site-wide value, so CSS is probably your best option to apply it just to blog widths.

    Once you set a new, larger max width, both the blog content and sidebar will be expanded. Normally they have a roughly 80% / 20% split of the space, but if you want to keep the blog content at its current size you'll need to adjust this split and also add some padding to the left of the blog content to bring it back in from the side.

    Here's an example of the code to do this, though you'll probably want to tweak the values to your liking:

    Code:
    @media only screen and (min-width: 981px) {
    body.single-post #main-content .container {
        max-width: 1680px;
    }
    body.single-post #left-area {
        width: 70%;
        padding-left: 15%;
    }
    body.single-post #sidebar {
        width: 30%;
    }
    body.single-post.et_right_sidebar #main-content .container:before {
        right: 30% !important;
    }
}
    Also note that I tested this against the default Divi blog post layout - you may want to remove some (or all) of your current CSS initially to avoid any conflicts and then add it back in as needed.
     
    #2 Divi Booster, Jun 3, 2024
  3. chrisF

    chrisF New Member

    Thank you - this has worked!
     
    #3 chrisF, Jun 3, 2024
    1. PRO MEMBER PERKS Divi Block Pro - Premade rolling text design for your Divi site without using any plugins:View Demo
  4. Divi Booster

    Divi Booster Divi Expert

    Great! You're welcome, Chris :)
     
    #4 Divi Booster, Jun 3, 2024
(You must log in or sign up to post here.)