# Mobile Responsive Customizer

**URL:** <https://community.hubspot.com/t/mobile-responsive-customizer/110733>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [July 5, 2024, 9:37am UTC](https://community.hubspot.com/t/mobile-responsive-customizer/110733 "2024-07-05T09:37:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rika1](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rika1](https://community.hubspot.com/u/rika1)\
**Post date:** [July 5, 2024, 9:37am UTC](https://community.hubspot.com/t/mobile-responsive-customizer/110733/1 "2024-07-05T09:37:20Z")

</div>

Hello  
I created custom module and added dynamic css as well but i want that css to change as per mobile screen how can i add mobile reponsive option dynamically? so that I’m able to change same font size for mobile and desktop according to screen in customizer. Here is my desktop code  
.custom-tabs li{  
padding-bottom: {{ module.style.spacing.tab\_title\_spacing.padding.bottom.value }}{{ module.style.spacing.tab\_title\_spacing.padding.bottom.units }};  
padding-top: {{ module.style.spacing.tab\_title\_spacing.padding.top.value }}{{ module.style.spacing.tab\_title\_spacing.padding.top.units }};  
padding-left: {{ module.style.spacing.tab\_title\_spacing.padding.left.value }}{{ module.style.spacing.tab\_title\_spacing.padding.left.units }};  
padding-right: {{ module.style.spacing.tab\_title\_spacing.padding.right.value }}{{ module.style.spacing.tab\_title\_spacing.padding.right.units }};  
font-family: {{ module.style.fonts.tab\_title.font|escape\_attr }};  
color: {{ module.style.fonts.tab\_title.color|escape\_attr }};  
font-size: {{ module.style.fonts.tab\_title.size|escape\_attr }}{{module.style.fonts.tab\_title.size\_unit|default(‘px’)|escape\_attr }};  
}

---

<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 5, 2024, 10:57am UTC](https://community.hubspot.com/t/mobile-responsive-customizer/110733/2 "2024-07-05T10:57:46Z")

</div>

Hi @rika1,

if you’re using the “spacing” function you can simplify the code like this:

`{{ module.style.spacing.tab_tile_spacing.css }}`

this will give you something like

```lia-code-sample
padding-top:20px;
padding-bottom:21px;
margin-top:15px;
margin-bottom:16px;

```

(values are just random numbers)

As of the mobile settings you can duplicate the spacing function, rename it to something like “mobile\_spacing” and write the code like this

```lia-code-sample
.my-element{
{{ module.style.mobile_spacing.css}}
}

@media screen and (min-width:1024px){
.my-element{
{{ module.style.spacing.css}}
}
}

```

If you have several elements that you want to modify independently in the module I recommend to group them like  
Desktop settings(group)  
- spacing  
- font size  
Mobile settings(group)

- spacing  
- font size

If you don’t want to set those settings per each module, consider putting those settings in the theme fields.json like

Colors(group)  
Fonts(group)  
…

Modules(group)

- NAME-OF-YOUR-MODULE

- - Desktop settings(group)

- - - padding  
- - - font-sizes  
- - Mobile settings(group)

- - - padding  
- - - font-sizes  
…

and put the whole code just in the theme-overwrites or a similar css file.

best,

Anton

---

<div class="post-metadata">

**Author:** ![rika1](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rika1](https://community.hubspot.com/u/rika1)\
**Post date:** [July 5, 2024, 11:01am UTC](https://community.hubspot.com/t/mobile-responsive-customizer/110733/3 "2024-07-05T11:01:34Z")

</div>

i want it for font size how can i do that?

---

<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 5, 2024, 12:28pm UTC](https://community.hubspot.com/t/mobile-responsive-customizer/110733/4 "2024-07-05T12:28:09Z")

</div>

As for font-sizes it’s the easiest to provide a number field which you configure.

```lia-code-sample
{
 "name": "font_size",
 "label": "Font size",
 "required": true,
 "locked": false,
 "display": "text",
 "step": 1,
 "type": "number",
 "min": null,
 "max": null,
 "suffix": "px",
 "inline_help_text": "",
 "help_text": "",
 "default": "18"
}

```

If you like to use em/rem

do it like this:

```lia-code-sample
{
 "name": "font_size",
 "label": "Font size",
 "required": true,
 "locked": false,
 "display": "slider",
 "step": 0.125,
 "type": "number",
 "min": 0.625,
 "max": 2,
 "suffix": "px",
 "inline_help_text": "",
 "help_text": "",
 "default": "1.125"
}

```

do this for all media-queries you need and provide a unique name and label.

Once created put this into your module.html or theme-overwrite.css

```lia-code-sample
.my-element{
font-size: {{ module.style.mobile.font_size }}px; {# or (r)em if you're using rem #}
}

@media screen and (min-width:1024px){
.my-element{
font-size: {{ module.style.desktop.font_size }}px; {# or (r)em if you're using rem #}
}
}

```

Note: Module. works only in modules. If you’re putting the settings in the theme fields, you have to replace the path to the theme field

best,

Anton