Hello SP Page Builder community,

I am working on a Joomla 5 site using SP Page Builder. My design requires two hero modules: one optimized for desktop, the other for mobile devices. Each module has a distinct H1 heading and content tailored to its target screen size.

To achieve responsive behavior, I currently include both modules in the DOM and use CSS to show/hide them based on viewport size. However, this causes duplicate H1 tags and duplicate content in the DOM, which I want to avoid for SEO and accessibility reasons.

I have explored client-side JavaScript solutions to remove non-visible modules from the DOM, but these approaches are unreliable or cause flickering and indexing issues.

My questions are:

Does SP Page Builder support any built-in or recommended method to conditionally render or load modules/content based on device or screen size, so that duplicate H1 or content doesn’t exist simultaneously in the DOM?

If not, what is the best practice within SP Page Builder for handling drastically different content or headings for mobile and desktop views without duplicating content in the DOM?

Would creating separate modules and using Joomla template overrides or PHP device detection be the advisable approach?

Any tips, extensions, or workflows you recommend to handle this common responsive content challenge?

Thank you for your insights and advice!

For example: https://nasadovky.cz