Inquiry On Automatic Layers In SP Page Builder Affecting Custom CSS
GREEN TAL S.A.
Dear SP Page Builder Support Team,
I am reaching out to resolve a question regarding the HTML structure generated by SP Page Builder and its interaction with the application of custom CSS styles.
I have constructed a structure in SP Page Builder that imitates a card, applying a .card-container class with height: 300px, and a child element .card-body with height: 100%. However, I have noticed that height: 100% on .card-body does not work as expected due to several intermediate layers that SP Page Builder automatically generates above .card-body.
My question is whether there is any recommended way to control these intermediate layers without having to apply additional CSS from the site’s global settings. So far, I have been unable to access these layers from within the SP Page Builder addon settings, which complicates the intended design.
I am attaching a screenshot to illustrate the structure and the issue, as well as the link to the page in question: https://torralbadecalatrava.es/index.php?option=com_sppagebuilder&view=page&id=200
Thank you for your attention, and I apologize if this issue stems from a lack of understanding on my part. Any guidance would be appreciated.
Best regards,
Toufiq
Accepted AnswerHi there,
Thank you for reaching out! I noticed that Pavel has already responded to your query. He’s been a long-time and valued member of the JoomShaper community.
However, if you still need any further assistance or clarification, feel free to reach out. I’ll be happy to help.
Best regards,
Toufiqur Rahman (Team Lead, Support)
Pavel
Accepted AnswerHi.
I suppose your question is outside the support of JoomShaper.
Before applying CSS, create the correct and optimal structure. I would use Feature Box addon, instead of the complex structure that you created.
Everything else is done only through CSS. There are no options in the interface for this task.
Additional recommendation. Use images as a background (Addon's Style Tab). Before use, create images close to real size and with the same proportions.
Now your images are not the same in proportions.
And they have several orders of magnitude larger than necessary, which will lead to slow speed of the site.
- Real size of existing image
- Real needed size
Create images with a width of 700px to have a quality reserve for all devices screens. Always compress the finished images before loading to the site.
GREEN TAL S.A.
Accepted AnswerHello,
Thank you very much for your response. I appreciate the clarification.
However, I don't quite understand what you mean by "outside the support of JoomShaper," as I do have an active SP Page Builder license. Could you clarify this point?
Additionally, regarding your recommendation, could you please confirm if, given the lack of interface options for this CSS modification, the only solution would be to apply custom CSS directly to the intermediate layers generated by SP Page Builder?
Thank you again for your assistance.
Pavel
Accepted AnswerHowever, I don't quite understand what you mean by "outside the support of JoomShaper," as I do have an active SP Page Builder license. Could you clarify this point?
For clarity. I am not an employee of support.
Any customization related to the code outside the support - you can see this by reading the company's policy.
Additionally, regarding your recommendation, could you please confirm if, given the lack of interface options for this CSS modification, the only solution would be to apply custom CSS directly to the intermediate layers generated by SP Page Builder?
Yes, I confirm.
You can use such a selector structure in your CSS
.parent-class :is(.child-class-1, .child-class-2, .child-class-3) {
height: 100%;
}