Define Breakpoints Global In SP Page Builder - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Define Breakpoints Global In SP Page Builder

MK

Mario Kaufmann

SP Page Builder 1 year ago

Hi

I try it this way, because I try now over a week to solve this issue in a private Post wiht Joomshaper support, but till now nobody can help:

Does somebody in this Forum know, where I can define global the breakpoints, that I can define in SP Page Builder when it change from Desktop view, to Tab view and then to Smartphone view?

Till now I get from Support here only this Link (But this is only for old SP Page Builder and is not working in current Version of SP Page Builder): https://www.joomshaper.com/blog/how-to-make-a-website-perfectly-responsive-with-sp-page-builder

0
3 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #144479

HI Mario,

breakpoints (based on resolution) that are used in SPPB are from Bootstrap, this is no secret.

If you want to override used values to use custom ones, you have to use extra Custom CSS. So you cannot change them from settings. For example Desktop/Laptop uses @media (min-width: 1200px) { }


Link that you shared is from 2018, and probably it was based on SPPB 3.x.

If you need current info use SPPB 5 documenation & bootstrap 5 gudies.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #144483

^.^

info_2109_2024.jpg

0
MK
Mario Kaufmann
Accepted Answer
1 year ago #144491

Hi Paul

Thank you very much for your help, with your answer in less then 1 hour we have already come much further then after 1 Week in the other private ticket (the private ticket was really frustrating..). BTW: The Link above is from your support team, and I already told them, that it is not for current Version (but they ignored my message..). In SPP5 Documentation I can't find information about Breaktpoints, or am I overlooking them?

As I understand you, we need to define in custom CSS like this:

  • Desktop: @media (min-width: 1200px) { }
  • Tablet: Could you please help me how to define this?
  • Smartphone: Could you please help me how to define this?

Thanks for sharing the screenshot: But this is only for a single module, right? I want to define it global for all SSP5 Pages.

0