Mobile optimize Custom Module

Developer Support CMS Development
1

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.

Screen Shot 2023-07-05 at 3.01.02 PM.png
Screen Shot 2023-07-05 at 3.01.02 PM.png808×1782 116 KB

2

Hey, @jestlinbaum :waving_hand: 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

3

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

4

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

5

Thanks everyone! I really appreciate the input.