Helix Ultimate: How to reduce margin on Joomla article page to match margin of SPPB page? - Forum | JoomShaper
Solved Helix Framework

Helix Ultimate: How to reduce margin on Joomla article page to match margin of SPPB page?

Asked by Peter Hunkeler 1 year ago Last activity 1 year ago

I've been analyzing my pages using browser developer tools to find out how I can reduce the margins of standard Joomla article pages to match the margins of SP Page Builder pages, but only on part of the page.

My site is built using Helix Ultimate and SP Page Builder 5. Some pages are built using SPPB, some show Joomla articles on the standard Joomla pages (formatted by Helix Ultimate).

All pages have to show a "sponsor block" at the bottom of the page, just above the footer. This block is build using an SPPB Module, positioned at "content-bottom".

This all works nicely, except for the margins for that "sponsor block". Here is a visualization

This is how a SPPB page is shown:

The margins/paddings match the that of the header (red double arrow line). This section has a grey background, which illustrates that the content extends to the "max-width" of the page (red circled areas).

The "sponsor block", which is built via SPPB site module, looks like this when shown on a SPPB page:

The padding (red double arrowed line) matches that of the SPPB page shown above that block. Also the gray background extends to the "max-width" (red circles) the same as the SPPB page content above.
The module definition:

Now, this image show the upper part of a plain Joomla article displayed using as standard Joomla page:

Again the margins/padding is highlighed by the red double arrowd line. It matches how the SPPB page is shown

And here is "Sponsor block" as it appears on such standard Joomla pages, i.e. non-SPPB pages:

As you cab see, there is an unwanted white bar on the left and right side of the module (red double arrows line).

I would want the grey background of the module to extend to max-width here too.

I couldn't find any hint on what custom CSS I should add. I also tried to placde the module at other positions. And, I also tried to add an additional section in the Helix Ultimate layout.

Can youn help me out?

Accepted answer

Marked as the solution
Ofi Khan Staff
1 year ago

It looks like you have already solved the problem. Please accept the answer to close the issue if solved. There is a button to accept answer after each comment.

8 more replies

Oldest first Newest first Most helpful
Ofi Khan Staff
1 year ago

Hello Peter Hunkeler,

Thank you for reaching out to our technical support forum. I’m sorry to hear about the trouble you’re experiencing. Rest assured, I will look into this issue for you and work to resolve it as quickly as possible.

If you could kindly provide any additional information regarding the issue, it would greatly help me investigate and address it more efficiently. Please share one SP Page Builder article and one Joomla article link to compare and solve the issue.

Best regards

Ofi Khan Staff
1 year ago

Please use this CSS to
Template Options -> Custom Code -> Custom CSS

@media (min-width: 1400px) {
    .view-article .container {
        max-width: 100%;
        padding: 0px;
    }
    .view-article .article-details{
        padding: 50px;
    }
    .view-article #sp-bottom{
        padding: 50px;
    }
}
Peter Hunkeler Asked this
1 year ago · edited

Thanks. This works partly. I need to add the same padding to the header. do you happen to have this CSS code at hand? Otherwise, I'll have to find out.

And, I need to remove the @media bracket, because this shall be active for all screen width (and devices)

Peter Hunkeler Asked this
1 year ago

No, its not solved yet. The solution you posted works for Joomla Article pages, but not for non-SPPG pages in general. Besides Article pages, I also have Joomla Blog pages, and maybe more in the future. I know I didn't tell, but I thought I might be able to come to a general solution from then solution you proposed.

And, there still is tehe problem that the margins/paddings for the header need to be set when applying your solution.

In the meantime, I have tried to play with negative margins for the SPPB module section (the one that shall extend to max-width). I have not solved it yet.

In general, I understand that the Helix ultimate template imposes a fix margin on the heaader and main body part. SP Page Builder pages on the other side remove that margin and start at 0 in the main body section. I need this SPPB behaviour for that specific SPPB module.

Maybe there is a solution by adding another section to the Helix Ultimate Layout? I tried to add on an d assign it one of the "user" positions. Havent't succeeded, yet, to have this section extend to max-witdh, and not having the standard Helix Margins. Still working on this.

Ofi Khan Staff
1 year ago

Please share the page link where the issue still exists. I will try to fix them.

Peter Hunkeler Asked this
1 year ago

Instead of adding custom CSS for eachtype of non-SPPB page type, I'd prefer to modify the layout in the Helix Ultimate template, i.e. adding a new section. In the meantime, I managed to go that route successfully.
Thanks for all the help with this.

Ofi Khan Staff
1 year ago

You are welcome 😊

There is an option to set maximum width of the container in Helix Ultimate -> Template Options -> Basic -> Body. You can use this option if needed.

https://prnt.sc/fs02vvyqwApG

Log in to reply.