Font Size with em Not Adjusting on Mobile Screens

Hi everyone,

I’m facing an issue with font size adjustment in my widget. Even though I’m using em, the font size remains constant and does not get smaller on mobile devices.

Problematic Code:

- component: Label
  config:
    text: "=props.header ? props.header : ''"
    style:
      font-size: 2em
      font-weight: 600
      margin-left: 0.2em

The font size does not adapt when testing on mobile. I’ve already tried the following:

  1. Using rem instead of em.
  2. Adding media queries in the CSS file.
  3. Checking the parent container for fixed or inherited font sizes.

Goal:

I’d like the font size to dynamically adapt to the screen size, especially for smaller devices.

Relevant Configuration:

Here’s a snippet of my code for reference:

- component: Label
  config:
    style:
      font-size: 2em

Any help or suggestions on how to resolve this issue would be greatly appreciated!

Thanks in advance! :blush:
complete widget code

uid: Cell_switchcardnew
tags:
  - final
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
timestamp: Jan 13, 2025, 7:33:20 AM
component: div
config:
  stylesheet: |
    .card:not(.card-opened) .card-content {
      width: 100% !important;
    }
slots:
  default:
    - component: oh-context
      config:
        constants:
          widgetID: =Number.parseInt(Math.random()*8912).toString(16).padStart(4, '0')
    - component: f7-card
      config:
        expandable: true
        style:
          --f7-card-expandable-tablet-height: 80vh
          --f7-card-expandable-tablet-width: 39vw
          background-color: "=props.bgcolor ? props.bgcolor : ''"
          border-radius: var(--f7-card-expandable-border-radius)
          box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
          height: 90px
          margin-left: 5px
          margin-right: 5px
          margin-top: 10px
          noShadow: false
          padding: 0px
        swipeToClose: true
      slots:
        default:
          - component: f7-card-content
            config:
              style:
                background-color: red
                height: 100%
                margin: 0 0 0 0
                padding: 0 0 0 0
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - align-items-center
                    style:
                      background-color: "#f0f0f0"
                      flex-wrap: nowrap
                      font-size: 18px
                      font-weight: bold
                      height: 20px
                      margin: 0 0 0 0
                      width: 100%
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            background-color: red
                            text-align: left
                            width: 80%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  margin-left: 20px
                                text: "=props.title ? props.title : ''"
                      - component: f7-col
                        config:
                          style:
                            width: 20%
                        slots:
                          default:
                            - component: oh-button
                              config:
                                class:
                                  - cell-open-button
                                color: black
                                iconF7: expand
                                iconSize: 20px
                                style:
                                  background-color: yellow
                                  text-align: right
                - component: f7-row
                  config:
                    class:
                      - justify-content-center
                    style:
                      font-size: 16px
                      margin: 0 0 0 0
                      padding: 0 0 0 0
                  slots:
                    default:
                      - component: f7-block
                        config:
                          action: toggle
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionItem: =props.itemSwitch
                          class:
                            - card-prevent-open
                            - card-content-padding
                          outline: false
                          style:
                            background-color: red
                            height: 130px
                            margin: 0px 0px 0px 0px
                            padding: 0px 0px 0px 0px
                            width: 100%
                        slots:
                          default:
                            - component: f7-row
                              slots:
                                default:
                                  - component: f7-col
                                    config:
                                      style:
                                        background-color: blue
                                        height: 100%
                                        width: 80%
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            style:
                                              background-color: green
                                              height: 60%
                                              width: 200%
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  text: "=props.header ? props.header : ''"
                                                  style:
                                                    font-size: 2em
                                                    font-weight: 600
                                                    margin-left: 0.2em
                                  - component: f7-col
                                    config:
                                      style:
                                        background-color: white
                                        height: 100%
                                        width: 20%
                                    slots:
                                      default:
                                        - component: oh-toggle
                                          config:
                                            item: =props.item_schalter
                                            style:
                                              position: absolute
                                              right: 20px
                                              top: 15px
                      - component: f7-block
                        config:
                          class:
                            - card-prevent-open
                            - card-content-padding
                          outline: false
                          style:
                            width: 100%
                        slots:
                          default:
                            - component: f7-list
                              config: {}
                              slots: {}
                            - component: oh-button
                              config:
                                class:
                                  - card-opened-fade-in
                                  - cell-close-button
                                  - card-close
                                color: black
                                iconF7: xmark_circle_fill
                                iconSize: 30px
                                style:
                                  top: 20px

here on my mobile the screenshot

IMG_20250113_131513

and here on my notebook

You’ve got to follow this back all the way. You set the font-size to a static 16px in an f7-row that is several levels above the label:

and that font-size is being used as the basis for the 2em.