Solved SP Page Builder

Margin/Padding left - where does it come from

Asked by Peter Klinke 1 year ago Last activity 1 year ago

We have only one article edited in SP Pagebuilder with a left margin/padding. don't know where it come frome and how to remove.

Screenshot: https://drive.usercontent.google.com/download?id=1uG4zDTSNuULQd68wqK2gnoYtnXoo2jDv&authuser=0

https://philipp-dieffenbach-schule.de/ueber-uns/neues-aus-der-pds/weihnachtsmarkt-2024

It happens only when it is an article created in pagebiuilder coming from JCE Contenteditor and choosing SP Pagebuilder and Frontend or backend editor.
Articles created in plain JCE or as SP Pagebuilder Page are ok.

Reproduced on a second website with same result.

Accepted answer

Marked as the solution

Peter Klinke Asked this

1 year ago

Hi Ziaul,

looks fine for me on first check!

Because I have some more sites with this configuration I would like to know where I can find your css code and add to the other sites.

Thank you very much!

Ah, one more question:
When I add new rows in a page the padding on top and bottom is predefined wtih 75. Is it possible the change this value, so I must not change it every on new row?
Screenshot

Peter

Ziaul Kabir Staff

1 year ago

Hello,

You can find this CSS in System → Site Template Styles → shaper_helixultimate - Default → Template Options → Custom Code → Custom CSS.

For default padding in section, It is not possible to modify it for permanently in editor, as it is default behavior. However, you can remove it from all pages if needed using custom css. Just keep in mind that this will apply to every page across your site.

Thanks,

10 more replies

Ziaul Kabir Staff

1 year ago

Hello Peter,

Thank you for reaching out to us.

Regarding the margin-left values you mentioned, these are coming from the container, not the margin or padding settings. To make the container full-width, navigate to your article and edit it using the SP Page Builder front-end editor. Then, click on the row settings and enable the Stretch Section and Fluid Row options.

As for your second query: “Why can’t I add an image using the Image Icon anymore?”

Could you please provide more details about the issue so we can assist you better?

Thank you!

Peter Klinke Asked this

1 year ago · edited

Hi
No, that's not the solution.

That shows the page in full screen width.

Result:

Should be like other sites, for example

Peter

Ziaul Kabir Staff

1 year ago

Hello Peter,

Thank you for your replay. Could you kindly provide admin access in the hidden content section? Before proceeding, please ensure a full backup of your site is taken.

Looking forward to your response.

Best regards,

Pavel

1 year ago · edited

Hi Peter.

Old issue. Not related to margin/padding.

SPPB articles editor contains an outdated value of the container max-width based on Bootstrap 4 rules. There is not 1400px breakpoint with 1320px value by default.

To fix this, set up the max-width of the container to 1320px in the section settings.

Hi Ziaul Kabir.

You should add this to a bug list to fix in the next update.

And addition, there is another bug. If you activate the Column Alignment option, the Stretch Section option stops working correctly - the container begins to stick to the left border of the browser (in live view).

As an employee of support, you should learn to work with Dev Tools and study your own products well so as not to waste user time on unnecessary provision of access.

Since you are a beginner here, I hope you quickly increase your skills. Unfortunately, some support officers cannot increase their skills for years, which leads to a poor service rating.

Ziaul Kabir Staff

1 year ago

Hello Pavel,

Thank you for your suggestions and findings. I’d like to clarify that this is not a bug, and there is no need to set the container max width individually for each article section. You can configure this globally in the SP Page Builder Settings by setting the container max width value there.

Best regards,

Ziaul Kabir Staff

1 year ago

Hello Peter,

To resolve this issue, please confirm that you have set the container max width to 1320px. You can find this in the Component -> SP Page Builder -> Settings.

Let me know if this helps or if you need further assistance.

Best regards,

Peter Klinke Asked this

1 year ago · edited

Pavel is right!
1320 is already entered in the global settings, but this is ignored when creating articles.
If I enter this value in the container, it (almost) works.

Example with value 1320

I have to enter 1300, there is a difference of 20px coming from somewhere.

The preview is also not correct as Pavel wrote.
Example

Please proceed as suggested by Pavel!

@Pavel: Thank you very much! I hope for a bug fix soon ..

Ziaul Kabir Staff

1 year ago

Hello Peter,

Please, check this file. I share a webm recording file with you. I show you, It's work ok, from my end. To check your issues, Could you kindly provide admin access in the hidden content section? Before proceeding, please ensure a full backup of your site is taken.

Looking forward to your response.

Best regards,

Peter Klinke Asked this

1 year ago

Hello Ziaul,

looks nearly fine. Isn't it possible to solve it without adding the left margin -15px for every container as Pavel recomended?

"The developers should also take into account these nuances when they will be correct this."

Sincerely
Peter

Ziaul Kabir Staff

1 year ago

Hello Peter & Pavel,

Thank you for your suggestions. I will share them with our development team, and I hope they will be considered.

Thanks again, and wishing you a Happy New Year!

Peter Klinke Asked this

1 year ago

Hi,
is there something new about our issue?

Sincerely

Ziaul Kabir Staff

1 year ago

Hello,

Removing negative margin values (left and right) in our next release isn’t easy, as it could impact users’ websites when they update.

If you’re still experiencing issues, please create a new post and provide your admin access. As I recall, you had max-width and section alignment concerns. This will allow us to review your issue and provide a prompt solution.

Thanks.

Peter Klinke Asked this

1 year ago

Hi,

we should not create a new post before the old issues in this one are not solved! You offered a fix, which is not installed on both sites.
Screenshot in hidden area.

Where do the negative margins come from?

Pavel

1 year ago · edited

I’d like to clarify that this is not a bug

This is definitely a bug. As Peter noted, in the global settings it is spelled out 1320 px by default, but in the articles it is ignored because devs forgot to bring the articles editor to Bootstrap 5 breakpoints. There remained Bootstrap 4 breakpoints.

Pavel

1 year ago · edited

I have to enter 1300, there is a difference of 20px coming from somewhere.

More precisely, then 15px (negative default margins from sppb-row class)

1290px - accurate value for compensation of sppb-row margins.

The developers should also take into account these nuances when they will be correct this.

Peter Klinke Asked this

1 year ago

A solution in near time would be fine

Ziaul Kabir Staff

1 year ago

Hello,

I have added a small CSS fix to the custom CSS on both of your sites.

The issue you noticed occurs because the Articles page is generated from the Blog Layout, which causes the sppb-row container to inherit a width value that doesn’t match the SP Page Builder’s max-width settings. The layout is following the blog structure rather than SP Page Builder’s default container width.

Regarding the negative margin you mentioned in your screenshots, this issue is not actually related to negative margins. Instead, the discrepancy occurs because the Blog Layout container width is set to 1140px, whereas the SP Page Builder’s main container width is 1320px. This difference in container widths is why you noticed the layout shift.

To resolve this, I have adjusted the inner container to 100% width, so it now follows SP Page Builder’s main max-width value.

Thanks,

Peter Klinke Asked this

1 year ago

Hi Ziaul,

this is your code?

@media (min-width: 1200px) {
.view-article .sppb-row-container {
max-width: 100%;
}
}
Sincerely
Peter

Ziaul Kabir Staff

1 year ago

Yes.

Is there anything else that I can assist with?

Best Regards,

Peter Klinke Asked this

1 year ago

Thank you very much, Ziaul.
I will let the website owner check but I think all looks well.

Well, indeed I have something another I do not understand. 2 simple Pagebuilder pages on my site are very slow and I do not find out why. I already have removed complete animation but that dioes not change anything.

Would you have a look?

Sincerely
Peter

Ziaul Kabir Staff

1 year ago

I would suggest you to create a new post for this issues.

Thanks!