Content Spacing - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Content Spacing

JL

Josef Langenegger

Helix Framework 3 years ago

I use Helix Ultimate 2.0.7 and SP Page Builder Pro 3.8.6

The page is built as a box. The spacing of the content left and right must be like in picture 1. But from a certain window size it suddenly becomes smaller like in picture 2.

Why is this and how can I fix it?

Thank you for te support.

![https://langeneggers.ch/1.jpg] ![https://langeneggers.ch/2.jpg]

0
5 Answers
JL
Josef Langenegger
Accepted Answer
3 years ago #62349

I have now discovered that this error originated with the update of SP Pagebuilder to version 3.8.6. I have installed now the version 3.8.3 again. With this it works correctly.

What next?

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #62369

Hi there!

Thanks for your query.

As the new version of SPPB has got CSS for Bootstrap 5 now, so it does starts to follow an extra breakpoint and the max width value accordingly. Here is a screenshot of SPPB 3.8.6 changelog: https://prnt.sc/sTSxhlnrj3Xg

You will find breakpoints for Bootstrap 5 here:

https://getbootstrap.com/docs/5.0/layout/breakpoints/

And the previous versions' breakpoints here:

https://getbootstrap.com/docs/4.6/layout/overview/

Please have a look into the following screenshots and compare!

Previous view: https://prnt.sc/SG2W-fX7WMjT

Current view: https://prnt.sc/gb50JhCAFzEV

Hope it is clearer now.

You can use media query of your preffered one in your custom CSS still to keep your desired look.

Best Regard

0
JL
Josef Langenegger
Accepted Answer
3 years ago #62431

Thanks for the information. What I have to enter in custom.css so that the breakpoint by 1400px is not active?

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #62517

Hi,

You can use your previous code in your custom CSS, then it will get preferance I hope:

@media (min-width: 1200px){
.sppb-row-container {
    max-width: 1140px;
}
}

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

0
JL
Josef Langenegger
Accepted Answer
3 years ago #62535

Thanks a lot! It works.

0