Staff replied SP Page Builder

Negative margin-top only works on homepage, not on subpages (SP Page Builder Pro 6.7.1)

Asked by Sabine Schwind von Egelstein 2 months ago Last activity 1 month ago

I'm using the Feature addon with a negative margin-top value to visually pull tiles up into the previous section (overlapping effect). On my homepage this works correctly. On every other subpage, the same negative margin value is saved in the backend, but it's not output as CSS on the frontend — the tiles stay in their normal position, no upward shift.

Version: SP Page Builder Pro 6.7.1 (latest version)
Template: Helix Ultimate

Do you know what could be causing this, or whether this is a known bug?

13 replies

Ziaul Kabir Staff

2 months ago

Hi Sabine,

Thank you for the detailed explanation.

Could you please share:

The URL of the affected website (or a page where the issue can be seen).
A screenshot of the SP Page Builder settings showing the negative margin-top value for the Feature addon.

This will help us compare the output and determine whether it's a configuration issue or a bug in SP Page Builder Pro 6.7.1.

Looking forward to your reply.

Thanks

Sabine Schwind von Egelstein Asked this

2 months ago · edited

Hi Ziaul,

Further diagnosis: I added a custom CSS rule (margin-top: -80px !important) directly to the section and confirmed via DevTools Computed panel that this value is correctly applied. The tile is still not visually pulled up on the subpage.

I ruled out:

JavaScript setting top directly (checked via console — empty)
overflow: hidden on relevant parent elements

I did notice: the homepage's page-builder wrapper has an additional class home (sp-page-builder home page-9), which subpages don't have (sp-page-builder page-58). The section also has position: relative and will-change: top applied via a global rule. Could the home class or will-change: top be relevant here?

Affected page: : https://schwindvonegelstein.de/psychotherapie-und-paartherapie
Reference page (works): https://schwindvonegelstein.de/

Best regards,
Sabine

Sabine Schwind von Egelstein Asked this

2 months ago

Additional finding:

I noticed something that may narrow this down further: When editing the page in the SP Page Builder frontend editor, the tiles appear correctly pulled up (margin applied) immediately, before saving. As soon as I click Save, the tiles drop back down to their normal position — and this persists even after clearing all caches (including JCH Optimize) and testing in an incognito window with no browser cache.

This suggests the issue isn't caching or CSS specificity, but something that happens during the save process itself — e.g., SP Page Builder regenerating the page's CSS output on save and dropping the custom class/rule, or overwriting inline styles.

Affected page: https://schwindvonegelstein.de/psychotherapie-und-paartherapie
Reference page (works, margin persists after save): https://schwindvonegelstein.de/

Ziaul Kabir Staff

1 month ago

Could you please share temporary administrator access to your Joomla backend? You can provide the credentials securely in the hidden content section. Also, please take a full backup of your site before we make any changes.

Once I have access, I’ll investigate further and see what’s causing the issue. Let me know once you’ve shared the details!

Best regards,

Sabine Schwind von Egelstein Asked this

1 month ago

Hi Ziaul,

Thank you for looking into this further. I've created a temporary administrator account for you — I'll send the login details separately. I'll also take a full backup beforehand as suggested.

Please let me know once you're done so I can remove the temporary account again.

Best regards,
Sabine

Ziaul Kabir Staff

1 month ago

Please, check now.

Thanks

Sabine Schwind von Egelstein Asked this

1 month ago

Hi Ziaul,

I just checked again as requested — unfortunately still no difference. I tested three subpages (Selfcare, Soziale Kompetenz, Praxis) and the tiles are still displayed in their normal, non-overlapping position on all of them. The homepage is still the only page where the tiles are correctly pulled up over the hero image.

Screenshots of all four pages (homepage + 3 subpages) attached for comparison.

Let me know if you need anything else from my side, or if you'd like to proceed with the temporary admin access I mentioned earlier.

Best regards,
Sabine

Sabine Schwind von Egelstein Asked this

1 month ago

Hi Ziaul,

Thanks for flagging this. .pull-up-80 and .tile-pull-up are both leftover rules from our own debugging attempts on our side — trying different approaches to recreate the effect. Neither of them is currently producing any visible result on the subpages, as far as we can tell.

The only rule that demonstrably works is the hardcoded one, tied to specific addon IDs:

css
@media (min-width: 1200px) {

sppb-addon-f5dDqKcGSt_ha4n6B6GsJ,

sppb-addon-1588785538142,

sppb-addon-1588785538169 {

margin-top: -120px;

}
}

Since each SP Page Builder addon gets a unique auto-generated ID, this rule can structurally only ever apply to those specific tiles on the homepage — it was never meant to be reusable across pages. That's likely the real root of the issue: there may never have been a working, page-independent mechanism for this effect, only this one-off homepage rule.

Feel free to remove .pull-up-80 and .tile-pull-up if they're not needed for your investigation — they're not doing anything useful right now.

Best regards,
Sabine

Ziaul Kabir Staff

1 month ago

Hi Sabine,

Thanks for the clarification.

Could you please confirm whether you want to use the same design pattern, with the tiles pulled up over the hero section, on all pages or only on specific pages?

If you want the same effect on all or other pages, we can apply the same CSS class to the relevant sections/addons and then use custom CSS such as:

position: relative;
top: -120px;

The -120px value can be adjusted based on the exact visual requirement.

At the moment, you are trying to pull up a section that contains another div/element inside it. Because of this structure, changing the margin-top value may not produce the expected result. Using position: relative with an appropriate top value should give us better control over the positioning.

Thanks!

Sabine Schwind von Egelstein Asked this

1 month ago

Hi Ziaul,

Thank you, that explanation makes sense — using position: relative with top instead of margin-top sounds like the right approach given the nested structure.

We'd like the same pull-up effect applied consistently wherever we use this overlapping layout — that's the following pages:

The homepage already works correctly and doesn't need changes. Please use a consistent, reusable CSS class (rather than hardcoded addon IDs) so we can apply it ourselves to future pages with the same layout going forward.

Thank you for your help with this!

Best regards,
Sabine

Ziaul Kabir Staff

1 month ago

I have already added the custom CSS to the template styles. Please just add the tile-pull-up class to the specific pages by following the screenshots.

Thanks!

Sabine Schwind von Egelstein Asked this

1 month ago

Hi Ziaul,

Thank you so much for your help with this — the tile-pull-up class is now working correctly on all the pages we needed it for. I really appreciate the thorough investigation and the clear explanation of what was actually causing the issue.

Great support, thank you!

Best regards,
Sabine

Ziaul Kabir Staff

1 month ago

It’s great to hear that your issue has been resolved.
If everything is working fine now, please mark the question as complete by accepting any of our answers.

Thank you!