topic Re: Mobile optimize Custom Module in CMS Development

Mobile optimize Custom Module

jestlinbaum — Wed, 12 Jul 2023 13:50:37 GMT

When using (for instance) a standard HubSpot rich text module in a drag and drop template. There is the ability to adjust styles based on desktop / mobile. Is there a way to incorporate that same behavior when building/using a custom module? Right now, I can only set one set of styles no matter which option I am toggled on.

Re: Mobile optimize Custom Module

Jaycee_Lewis — Thu, 13 Jul 2023 18:59:25 GMT

Hey, @jestlinbaum 👋 Thanks for reaching out! I don't see this in the documentation for modules:

Hey, @Anton @Phil_Vallender @WMM_Inbound do you have any tips to share with @jestlinbaum?

Thank you very much! — Jaycee

Betreff: Mobile optimize Custom Module

A_Wessolly — Thu, 13 Jul 2023 20:52:51 GMT

Hi Jestlinbaum,

i just tried it in my theme and it looks like it is only possible for now to have seperate values for those in your Screenshot: Visibility, Hide and Alignment/spacing. If you change a value in Desktop and try to set one for mobile, it resets the Desktop value, regardless of the type of the module ( default or custom module).

However, this can of course mitigated with CSS. You can write a media query for mobile ( which would be in fact the better option) screen.

Kind Regards,

Andreas Wessolly

Re: Mobile optimize Custom Module

Anton — Thu, 13 Jul 2023 23:36:26 GMT

Hi @jestlinbaum,

can confirm @A_Wessolly - I can edit those values in a custom theme with a custom module.

Pro tipp:It's a bit more work but definately possible - If you're creating a custom module you can put as many styling options into it as you wish. You don't necessary need the "mobile" toggle. You could add a spacing element for desktop, one for tablet and one for mobile into it and write

{% require_css %} <style> {% scope_css %} .myElement{ {{module.styles.mobile_spacing.css}} } @media screen and (min-width:768px){ .myElement{ {{module.styles.tablet_spacing.css}} } } @media screen and (min-width:1200px){ .myElement{ {{module.styles.desktop_spacing.css}} } } {% end_scope_css %} </style> {% end_require_css %}

into the HTML+Hubl area of the module (I recommend to put it at the very beginning so you don't have to look for it, if it's a bigger custom module).

And a tipp: Make your life easier by grouping such options according to the best-practises

hope this helps,

best,

Anton

Re: Mobile optimize Custom Module

jestlinbaum — Fri, 14 Jul 2023 14:28:31 GMT

Thanks everyone! I really appreciate the input.