SP PB: Incorrect Margins after update from SP PB V4.0.11 to V5.2.7 - Forum | JoomShaper
Solved SP Page Builder

SP PB: Incorrect Margins after update from SP PB V4.0.11 to V5.2.7

Asked by Peter Hunkeler 2 years ago Last activity 2 years ago

Hi,
A month ago, I first tried to update my site from SP PB V4.0.11 to V5. There was an update error reported. See discussion with subject "Error When Updating SP PB From V4 To V5".

Today, I was updating my prod site from V4.0.11 to V5.2.7. As advised in the above mentioned, I first uninstalled V4, then installed V5. That seemed to have worked, but the page margins are incorrect after the update.

This is how one of the pages look on V4.0.11:
Correct margins wit sppb v4.0.11

This is how the pages look after updating to V5.2.7:
Incorrect margins after update

What is wrong here? How can I resolve this without having to edit each single page and check all the margins for all the different device widths?

regards
Peter

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
2 years ago

Hi Peter,

I am afraid that SPPB 4 was a temporay version (between v3 - v5).

You have two options: set common padding for each page using Custom CSS or set it manually.

It could be also not a padding issue but different container width ".sppb-row-container"

If you have both sites use Code Inspector and check to be sure.

I don't have other ideas by now.

Peter Hunkeler Asked this
2 years ago

Hi Paul,
thanks a lot for the quick reply. Much appreciated.

It could be also not a padding issue but different container width ".sppb-row-container"

Yes, indeed, this caused the problem. I've had to modify this value in the custom.css file:

/*---------------------------------------------------------------------------------------------------
    SP Page Builder pages show too narrow left and right margins on screens wider than 1400px
    when the Helix template is set to "Body Boxed Layout". 
    Setting value from @media (min-width: 1200px) which is more appropriate.
--------------------------------------------------------------------------------------------------*/
@media (min-width: 1400px) {
    .sppb-row-container {
        max-width: 1140px;  /* SP Page Builder CSS value: 1320px */
    }
}

It turned out that the override was not honoured on SP PB V5, for whatever reason, but is honoured on SP PB V4. Not sure why this is, but adding !important to the above custom.css snipped resolved the issue. (I know I should have had the !important in the first place, but I didn't recognize it was missing simply because everything worked as desired.)

So, thanks again for putting me on the right track.

Best regards
Peter

Log in to reply.