Mobile Responsive Customizer

Develop, Build & Integrate CMS Development
1

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 }};
}

2

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

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

.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

3

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

4

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

{
 "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:

{
 "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

.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