Home>Support>Margin issue when using a colored background in a row with two columns

Margin issue when using a colored background in a row with two columns

Hello,

I am using Vantage Premium and Page Builder on a site for a client and the site is set for boxed layout.

After upgrading to the latest version of Page Builder (I think that’s when the problem happened), rows with two columns and a colored background were 15px wider on the left and right than rows with two columns and a white background. Change the color to white on the colored backgrounds and the margin overlap goes a way.

The fix for me is to either set the gutter to zero (I think the gutter is the crux of the problem; it’s 30 pixels wide by default) or in attributes by entering this css code:

.style-cell-class{
  margin-top: 0px;
  margin-right: -20px;
  margin-bottom: 0px;
  margin-left: -20px;
}

I can’t show you the problem now because it’s on a live site, but I have recreated the problem on my localhost. Honest, it happens.

I think this is a bug, but I could always be doing something wrong. It only seems to happen when color is set for the row’s background. I have not tried it with an image and I imagine the overlap problem increases with the number of columns used.

Looking for the problem with Inspect Element makes me appreciate the complexities that go into Page Builder.

Thanks for your help in fixing this.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 5 months ago Dave LeBlanc

    PS. I didn’t see this reported elsewhere, so if you have already dealt with this issue, sorry about that.

    Dave LeBlanc

  2. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Hi Dave

    Good to hear from you. Sorry about the problem. Vantage carried the first theme integration for Page Builder that we created, as we gradually made those features part of Page Builder’s core, we did run into a few problems in Vantage. We’re working through those.

    Just on the off chance, does inserting the following into Custom CSS help?

    /* Page Builder Full Width Rows */
    
    .layout-boxed .panel-row-style {
      margin: 0 -1000px;
      padding: 25px 1000px 25px 1000px;
    }
    
  3. 9 years, 5 months ago Dave LeBlanc

    Hi, Andrew.

    Thank you for the prompt reply. This is why I try to use Vantage and Page Builder.

    This may have fixed a full width issue, but for this application I used a boxed layout. I did put the fix in and it resulted in a nice full-width row. I am not sure the issue is with Vantage, but with Page Builder. I am going to be starting a new site in a few weeks and I will see then.

    For now I will use the fix I have and see what develops and it crops up again, I know how to fix it. .

    Thanks again for your help.

    Dave LeBlanc

  4. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Hi Dave

    Thanks for the feedback. I chatted with Greg about this now. He’s going to take a look over the problem for us. We’ll include the fix in the next Vantage update. That should be very soon. If not, I’ll post an updated hotfix here.

  5. 9 years, 5 months ago Dave LeBlanc

    Thanks, Andrew. As long as I have a fix, no worries. (I think that’s the proper phrase in South Africa.)

    Have good weekend.

  6. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    We might have picked it up from the Australians but indeed! As long as it gets resolved :)

    I don’t think this will be an issue with a new site. It’s just existing sites affected. Re-saving each Page Builder row as Standard row layout will also do the job but that’s very time consuming so a CSS fix would be ideal.

    I’ll let you know once Greg has taken look.

    Thanks :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More