MainUI on mobile changes widget to all Caps

Add-ons UIs
1

Hi All I have strange question , I just noticed that my custom widget look diffrent on mobile then on the desktop.

image
image704×1466 104 KB

image

If you noticed the names are ALL CAPS on the mobile version. (if I check desktop site on the mobile chrome it will be lowercase as in the )

Where in the depths of the mainUI are buried controls for that?
TIA

2

Add this css style to all of your widgets, or if possible to the config section of your page:

style:
  --f7-button-text-transform: none
3

following your lead I tried

    --f7-button-large-text-transform: none;
    --f7-button-text-transform: none;
    --f7-button-small-text-transform: none;

still the mobile version is all caps

Just for reference I put it here in widget style:

image
image1796×1985 217 KB

4

When setting styles using the widget yaml, do not end the style with a ;. Use

--f7-button-text-transform: none

instead.

1 Like
5

Many thanks, that did the job.