Margin/Padding Left - Where does It Come From
Peter Klinke
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.
Peter Klinke
Accepted AnswerHi 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
Accepted AnswerHello,
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,
Ziaul Kabir
Accepted AnswerHello 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
Accepted AnswerHi No, that's not the solution.
That shows the page in full screen width.
Should be like other sites, for example
Peter
Pavel
Accepted AnswerHi 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
Accepted AnswerHello 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
Accepted AnswerHello 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
Accepted AnswerPavel 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.
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
Accepted AnswerHello 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
Accepted AnswerHello 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
Accepted AnswerHello 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!
Ziaul Kabir
Accepted AnswerHello,
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.
Pavel
Accepted AnswerI’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
Accepted AnswerI 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.
Ziaul Kabir
Accepted AnswerHello,
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
Accepted AnswerHi Ziaul,
this is your code?
@media (min-width: 1200px) { .view-article .sppb-row-container { max-width: 100%; } } Sincerely Peter
Peter Klinke
Accepted AnswerThank 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