1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
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. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Fully change color of second column

Discussion in 'Free Divi Community Forum' started by Chris Sebes, Jul 28, 2025.

  1. Chris Sebes

    Chris Sebes Member
    Pro Member (Support Expired)

    I have a two-column layout set up. However, when I change the background color of the second column, it does not color the entire column. I feel like this should be straight-forward and have done this many times before. But this time, it's only filling the area with the testimonials are. Am I missing something obvious?

    https://springgreen-pony-971925.hostingersite.com
     

    Attached Files:

    #1 Chris Sebes, Jul 28, 2025
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  2. Divi Booster

    Divi Booster Divi Expert

    Hey Chris,

    I think the issue here is with the way the content is moved up behind the header. As I'm sure you know, the section with the video background has its top position set to -150px, to move it up under the transparent header. This section also has its bottom margin set to -149px, presumably to move the subsequent sections up. The problem is that this bottom margin is (for reasons I don't fully understand), creating a gap between the top of your two column row and the tops of the columns. Which I think is stopping your column background from fully covering that column's side of the row.

    One way to fix it is to change how the header itself is positioned on the page. If you set its position to "absolute" it will position it at the top of the page, but remove it from the normal flow of the page (so it now the content below will automatically shift up underneath it. Here's the CSS way to do that (though you might want to set it within Divi instead):

    Code:
    Log In or Sign Up to view this code.
    Then, you can remove the adjustments you've previously made as they are no longer necessary, e.g. set:

    Code:
    Log In or Sign Up to view this code.
    Now, the columns will fully fill the row (apart from a 20px padding currently surrounding the row). If you then add a bit of padding on the column itself, the background will be shown behind the testimonials:

    Code:
    Log In or Sign Up to view this code.
    Hope that helps!

    Dan
     
    #2 Divi Booster, Jul 28, 2025
  3. Chris Sebes

    Chris Sebes Member
    Pro Member (Support Expired)

    THANK YOU!

    I knew that was not the way I'd set overlapping hero images with the header in the past! It's been a while since I'd built a site with that design and I couldn't figure it out. Setting the header to Absolute was exactly what I needed.

    Once I got that set, I was able to go into the column and add some extra space around the Testimonials to make it look the way I want. I might play with it a bit more, but this got me 96.8% there.

    Greatly appreciated!
    Chris
     
    #3 Chris Sebes, Jul 28, 2025
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  4. Divi Booster

    Divi Booster Divi Expert

    You're welcome, Chris! Glad that did the trick :)

    Just shout if there you need any further help with it or anything else.

    Cheers!
     
    #4 Divi Booster, Jul 28, 2025
(You must log in or sign up to post here.)