Editable font size for mobile view (media query)

[WFabian]

Hello everyone,
is there a solution for giving the customer the ability to edit font sizes for desktop and mobil view? Currently only one font size for everything is possible and we need different sizes for desktop and mobile.

Best regards
Wanja

[Stephanie-OG]

Hi @WFabian

Instead of adding the styling inline as it is now, you could add it to a <style> tag so that you can use media queries. The way I do it would look something like this in the HTML field:

{# Module Styling #}
{% require_css %}
<style>
 {% scope_css %}

 {% if module.styles.title.text.font.css %}
 .my-title {
 {% if module.styles.title.text.font.color %}
 color: {{ module.styles.title.text.font.color }};
 {% endif %}
 {{ module.styles.title.text.font.style }};
 {{ module.styles.title.text.font.css }}
 } 
 {% endif %}

 {% if module.styles.title.text.font_size_mobile.size %}
 @media (max-width: 767px) {
 .my-title {
 {{ module.styles.title.text.font_size_mobile.size ~ "px" }}
 }
 }
 {% endif %}

 {% end_scope_css %}
</style>
{% end_require_css %}

<h1 class="my-title">{{ module.title }}</h1>

You can learn more about require_css and scope_css in the documentation.

As you can seen in the screenshot I have two font fields “font” and “font_size_mobile”:

Ideally you’ll only want to show the font size in the mobile font field and hide everything else (font, bold, italic, color, underline), which you can do using the visibility parameter if developing locally. So it’ll look like this to the content editor:

To achieve this, this is what the fields.json file looks like in my example module above (note the “hidden_subfields” for the “font_size_mobile” field):

[ {
 "id" : "3de2aa36-01c5-e265-2531-5f462e5437ef",
 "name" : "styles",
 "display_width" : null,
 "label" : "Styles",
 "required" : false,
 "locked" : false,
 "children" : [ {
 "id" : "c21a279b-9409-1619-1e19-6a76540b65a5",
 "name" : "title",
 "display_width" : null,
 "label" : "Title",
 "required" : false,
 "locked" : false,
 "children" : [ {
 "id" : "3f90a78e-6ddd-1a96-e9b8-356d291f02ee",
 "name" : "text",
 "display_width" : null,
 "label" : "Text",
 "required" : false,
 "locked" : false,
 "children" : [ {
 "id" : "5a647a78-4eda-7f3a-cd0e-a534bf870998",
 "name" : "font",
 "display_width" : null,
 "label" : "Font",
 "required" : false,
 "locked" : false,
 "load_external_fonts" : true,
 "type" : "font",
 "default" : { }
 }, {
 "id" : "6afb0c1a-be6a-6486-5f18-f6577edefcd4",
 "name" : "font_size_mobile",
 "display_width" : null,
 "label" : "Font Size (Mobile)",
 "required" : false,
 "visibility" : {
 "hidden_subfields" : {
 "font": true,
 "bold": true,
 "italic": true,
 "underline": true,
 "color": true
 }
 },
 "locked" : false,
 "load_external_fonts" : true,
 "type" : "font",
 "default" : { }
 } ],
 "tab" : "STYLE",
 "expanded" : false,
 "type" : "group",
 "default" : {
 "font" : { },
 "font_size_mobile" : { }
 }
 } ],
 "tab" : "STYLE",
 "expanded" : false,
 "type" : "group",
 "default" : {
 "text" : {
 "font" : { },
 "font_size_mobile" : { }
 }
 }
 } ],
 "tab" : "STYLE",
 "expanded" : false,
 "type" : "group",
 "default" : {
 "title" : {
 "text" : {
 "font" : { },
 "font_size_mobile" : { }
 }
 }
 }
}, {
 "id" : "7aeff440-60c4-7f94-7504-59016b75bd28",
 "name" : "title",
 "display_width" : null,
 "label" : "Title",
 "required" : false,
 "locked" : false,
 "validation_regex" : "",
 "allow_new_line" : false,
 "show_emoji_picker" : false,
 "type" : "text",
 "default" : "The title"
} ]

I hope that helps!

[WFabian]

Thanks alot for your response Stephanie!
We work with a theme and have no access to the fields.json.
Is there a way to access fields.json in a child-theme?
If not, is there another possible way to solve the mobile font size problem?

[Stephanie-OG]

Yes, you can create a child theme, then clone the module to the child theme (right click on the module in the parent theme and “Clone to child theme”) and update the fields from there.

Unfortunately I tested to see if I could update just the module’s fields.json in the child theme and that doesn’t seem to be the case. You need to clone the entire module (HTML, CSS, JavaScript, fields and meta).

You also don’t need to use the CLI or access fields.json to do the above. Cloning and editing the module fields can be done in the UI. The only feature you’ll be missing is the ability to hide the other field options (font, bold, italic, color, underline… using hidden_subfields), but perhaps you could use something like a number field instead if you just need the font size.