What breakpoints (large screen, small screen, tablet, mobile) does Helix Ultimate use? Are they the same for SPPB?
SPPB must have them encoded somewhere because there is a responsive mode.
I am having a few consistency issues with different components using different breakpoints, so how can I modify either Helix Ultimate and/or SPPB breakpoints, if necessary?
Hi there!
Thanks for contacting us.
The Helix ultimate and the SP Page Builder latest version both are using/following the Bootstrap 5 breakpoints.
Related info:
https://getbootstrap.com/docs/5.0/layout/breakpoints/
Best Regards
If I may....
read above and below.
Helix Ultimate is based on Bootstrap5 - so it uses this same breakpoints. But those are used ONLY for columns in Rows Layout. More details here (at the bottom):
https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/layout-builder
and SPPB uses those same but it has only for Mobile / Tablet.
so how can I modify either Helix Ultimate and/or SPPB breakpoints, if necessary?
By using custom CSS and/or you can use classes from Bootstrap documenation as well.
In case you don't know.... read about using @media in CSS, I recommend start from: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Using the page in the hidden content as a typical page - this is what we were using before updating to the new SPPB version, which had worked perfectly on phone/tablet/desktop.
@media (min-width: 1400px) {
.container {
max-width: 1140px !important;
}
}
What should we use now?
In last SPPB update we added this:
@media (min-width: 1380px) {
.sppb-row-container { max-width: 1320px;}
}Just override with needed value.