Betreff: Mobile optimize Custom Module

[jestlinbaum]

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.

 

[jestlinbaum]

Thanks everyone! I really appreciate the input.

[Anton · Accepted solution]

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

[A_Wessolly]

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

[Jaycee_Lewis]

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

• Create Modules (Design Manager)
• Configuring a module

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

Thank you very much! — Jaycee