Making elements responsive in the page builder

[SFI_AUS]

Hi, can you please clarify how… in Pro (im on 2.55) , we are supposed to make elements responsive? Say for example I want a module to take up 3 columns on desktop, and drop down to 1 col for mobile. Can you point me to the docs that explain how to do this please.

I’ve seen some questions posted by others and the answer that they’ve been given seems to be to: duplicate the module for each breakpoint needed… and hiding and showing where required. Surely that is not the ‘proper’ way to do it? That is far from an ideal solution as it bloats your page with duplicate versions of everything. Not to mention accessibility issues.

[lely]

Hi @SFI_AUS,

Yes, at the moment on content builder our option is either custom CSS or to utilize HIDE BASED on SCREEN WIDTH property like what you said where we duplicate the module for each breakpoint. This is available on HEADER and FOOTER builder, because of the flex option settings.

As of the moment, this functionality is in development mode. I can not share the details yet, but rest assure that we do take into considerations and discuss deliberately the features that are widely requested. We will let you know once this is available.

As temporary solution, if you don’t want to achieve this using HIDE BASED on SCREEN WIDTH property, custom CSS using media query can be use. Thank you for understanding.