Solved SP Page Builder

SPPB Full Width Section for articles and sppb modules Not working as expected

Asked by Graeme 1 year ago Last activity 1 year ago

Hi i have used this CSS by "Pavel" "SPPB Full Width Section for articles and sppb modules" on serveral site to get a full width section in article with no problems

I am tring to use elements from a layout bundle within an article and I am getting strange results The Section works perfectly in Page Builder Page
https://www.hannahsulek.co.uk/small-heddle-bottle.html https://www.hannahsulek.co.uk/small-heddle-bottle.html

But in the article page it looks like this
https://www.hannahsulek.co.uk/small-heddle-bottle-3.html https://www.hannahsulek.co.uk/small-heddle-bottle-3.html

i still have some css to tidy up but but the section itself is not displaying correcctly Can you help/

Accepted answer

Marked as the solution

Ziaul Kabir Staff

1 year ago

Hello,

Thank you for your reply.

• Applicability of the Fix: The amendment should only be applied if you notice the same issue on other sites. It’s best to avoid adding unnecessary CSS if it’s not solving a current problem.

• Updating Breakpoints: It may be beneficial to update all your sites to the newer @media (min-width: 1400px) standard if it aligns with modern design practices and supports larger screen sizes. However, make sure to test thoroughly to avoid any unintended layout changes.

• Best Practices: It’s a good idea to adopt a modular and consistent approach to CSS. Updating breakpoints and applying solutions only when the issue arises will help keep your code clean and efficient across your sites.

Is there anything else that I can assist?

Best Regards,

2 more replies

Ziaul Kabir Staff

1 year ago

Hello Graeme,

Thank you for reaching out to us.
This page section full width is not https://www.hannahsulek.co.uk/small-heddle-bottle-3.html work, due to a small css, Myabe it's comes form your template, You can fix it easily, use this css in your custom css:

.phm-mod-article-full-width-section .sppb-row-container, 
.phm-mod-article-full-width-section .sppb-container-inner {
        max-width: unset;
    }
}

To use custom css, check this guide: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Thanks,

Graeme Asked this

1 year ago

Hi Thanks for this it worked prfectly. I changed that code throughout the view points and it prevented the colour margin. Should i only use this amedement in this usecase or would it be appropriate to use in my other sites? mostly they are just a background image with centred content and this issue has not arissen previously.

I know there is the point if it is not broke dont fix it, but i have noted Pavels latest CSS code for this has updated the view point to @media (min-width: 1400px) Many my sites version starts with view point @media (min-width: 1140px) which is a little out of date so i would like to update these sites i would appreciate your insights.

Thank you