# Mobile optimize Custom Module

**URL:** <https://community.hubspot.com/t/mobile-optimize-custom-module/85179>\
**Category:** CMS Development\
**Tags:** design-manager\
**Created:** [July 12, 2023, 1:50pm UTC](https://community.hubspot.com/t/mobile-optimize-custom-module/85179 "2023-07-12T13:50:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jestlinbaum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jestlinbaum/32/68653_2.png) [@jestlinbaum](https://community.hubspot.com/u/jestlinbaum)\
**Post date:** [July 12, 2023, 1:50pm UTC](https://community.hubspot.com/t/mobile-optimize-custom-module/85179/1 "2023-07-12T13:50:37Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/7/57a5b33a86e976590e47ab3e73b5a5ed0785e109.png)

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [July 13, 2023, 6:59pm UTC](https://community.hubspot.com/t/mobile-optimize-custom-module/85179/2 "2023-07-13T18:59:25Z")

</div>

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

- [Create Modules (Design Manager)](https://knowledge.hubspot.com/design-manager/create-and-edit-modules)
- [Configuring a module](https://developers.hubspot.com/docs/cms/building-blocks/modules/configuration?_ga=2.190261675.1060292984.1689273619-1519099233.1689273619)

Hey, @Anton [@Phil\_Vallender](https://community.hubspot.com/t5/user/viewprofilepage/user-id/74) [@WMM\_Inbound](https://community.hubspot.com/t5/user/viewprofilepage/user-id/60200) do you have any tips to share with @jestlinbaum?

Thank you very much! — Jaycee

---

<div class="post-metadata">

**Author:** ![A\_Wessolly](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/a_wessolly/32/12795_2.png) [@A\_Wessolly](https://community.hubspot.com/u/A_Wessolly)\
**Post date:** [July 13, 2023, 8:52pm UTC](https://community.hubspot.com/t/mobile-optimize-custom-module/85179/3 "2023-07-13T20:52:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [July 13, 2023, 11:36pm UTC](https://community.hubspot.com/t/mobile-optimize-custom-module/85179/4 "2023-07-13T23:36:26Z")

</div>

Hi @jestlinbaum,

can confirm [@A\_Wessolly](https://community.hubspot.com/t5/user/viewprofilepage/user-id/328782) - 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

```lia-code-sample
{% 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](https://developers.hubspot.com/docs/cms/building-blocks/module-theme-fields/best-practices)

hope this helps,

best,

Anton

---

<div class="post-metadata">

**Author:** ![jestlinbaum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jestlinbaum/32/68653_2.png) [@jestlinbaum](https://community.hubspot.com/u/jestlinbaum)\
**Post date:** [July 14, 2023, 2:28pm UTC](https://community.hubspot.com/t/mobile-optimize-custom-module/85179/5 "2023-07-14T14:28:31Z")

</div>

Thanks everyone! I really appreciate the input.