Adjust the font size to different devices

If you display your dashboards on devices with different screen sizes, for example, on mobiles, or tablets, you can adapt the font size of the displayed widgets.

The font size of most widget elements, such as the widget title, is automatically adjusted to the device size. But you can adjust the font size of all widget elements, such as the KPI values of a speedometer (see the example below).

By default, MashZone NextGen uses a predefined font size with the default size factor 1. To adjust the font size to different devices, MashZone NextGen multiplies the default font size by the following predefined device factors:

Device

Device factor

(Factors for media query)

Font size, for example

Desktop (default)

@default-factor: 1;

min-width: 950px

max-width: 1128px

12px

Mobile

@small-device-factor: 0.8;

max-width: 529px

10px

Tablet

@medium-device-factor: 0.9;

min-width: 530px)

max-width: 949px

11px

Large devices

@large-device-factor: 1.2;

min-width: 1129px

15px

The font sizes are specified in the default.less template file. The file is located in the following directory.

<MashZone NextGen installation>\apache-tomcat\webapps\mashzone\hub\dashboard\assets\custom-look-and-feel\dashboard

Example

You want to specify the font sizes for the KPI values of a speedometer. The font sizes for mobiles and tables are based on the predefined font size font-big. Font-big is set as default size for the widget element here.

@speedometer-kpi-value-font-size: @font-big;

@speedometer-kpi-value-font-size-mobile: ceil(@speedometer-kpi-value-font-size * @small-device-factor);

@speedometer-kpi-value-font-size-tab: ceil(@speedometer-kpi-value-font-size * @medium-device-factor);

@speedometer-kpi-value-font-array: @speedometer-kpi-value-font-size-mobile @speedometer-kpi-value-font-size-tab;

Procedure

  1. Open the default.less style file in your text editor.
  2. Add your font size specifications for a widget element, as shown in the example above.
    1. Set the default font size for your widget element.

      For example:

      @speedometer-kpi-value-font-size: @font-big;

    2. Set the font size for different devices.

      For example:

      @speedometer-kpi-value-font-size-mobile: ceil(@speedometer-kpi-value-font-size * @small-device-factor);

      @speedometer-kpi-value-font-size-tab: ceil(@speedometer-kpi-value-font-size * @medium-device-factor);

    3. List the font sizes in a font array.

      For example:

      @speedometer-kpi-value-font-array: @speedometer-kpi-value-font-size-mobile @speedometer-kpi-value-font-size-tab;

  3. Save your settings.
  4. In database mode, upload the default.less.
  5. In file-based mode replace the default.less file in the following directory and compile the modified style.

    <MashZone NextGen installation>\apache-tomcat\webapps\mashzone\hub\dashboard\assets\custom-look-and-feel\dashboard

You settings are applied.