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:
- Using
rem
instead ofem
. - Adding media queries in the CSS file.
- 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!
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
and here on my notebook