We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

SPPB fluid rows not working

Featured Lock Resolved Issue
Hi,

One of my SPPB installations has an issue with fluid rows. They show up as boxed, and slightly off-center (left-biased).

The template is custom, Bootstrap 4 based.
Are there any known issues with fluid rows & BS4 or anything else in general?

Thanks in advance,
Alex

Attachments (1)

  • Screen Shot 2020-07-06 at 20.32.23 PM.jpg
    Screen Shot 2020-07-06 at 20.32.23 PM.jpg 162.1 KB

4 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
it works in Pages,
in articles may not, because it uses a different view
and template layout may be also a reason.

Alexander I.

More than a month ago #Permalink
Hi,
it works in Pages,
in articles may not, because it uses a different view
and template layout may be also a reason.


I'm referring to SPPB pages (not Joomla article view).

To my understanding, SPPB uses javascript to make rows fluid even if template has a boxed layout, yes?

Paul Frankowski - Staff

More than a month ago #Permalink
As I know, only CSS is used.

Is your template has Boxed layout set?

Pavel

More than a month ago #Permalink
To my understanding, SPPB uses javascript to make rows fluid even if template has a boxed layout, yes?

Hi. SP Page Builder runs inside a template container. Therefore, it depends on the container properties of your template. I think this can be easily configured using css if your template does not have a switch to fluid.

An example from Protostar. (The Protostar has a switch to fluid, but suppose there is no such switch.)
Here is how it looks at first.

1.jpg
Explore the code through the browser code inspector. Define the parent class so that the code works only for SP BP pages (1). Find the properties of the container (2) (3) and change them to 100%.

2.jpg
Copy the code and add the parent class to it. ( In protostar, this is the main class of the container and the container at the breakpoint more than 1200 px.)

We get such code for overriding:

.com_sppagebuilder .container {
max-width: 100%;
}
@media (min-width: 1200px) {
.com_sppagebuilder .container {
max-width: 100%;
}
}

It remains to remove the padding and rounding. And you get a full width page with SP PB inside.

body.site {
border: none;
padding: 0;
}
.body .container {
box-shadow: none;
border: none;
border-radius: 0;
padding: 0;
}


33.jpg

You need to carry out similar work with your template. Or use Helix Ultimate

Attachments (3)

  • 1.jpg
    1.jpg 202 KB
  • 2.jpg
    2.jpg 414.1 KB
  • 33.jpg
    33.jpg 215.8 KB


There are no replies made for this post yet.
Be one of the first to reply to this post!

126

Templates

333675

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us