Card footer size in the widget on the small screen

1

I have a widget with card footer (yellow) :

image

on the PC, it looks ok and tiny, but on the cell phone is this footer too wide.

my code is :

- component: f7-card-footer
      config:
        style:
          background: '=themeOptions.dark === "dark" ? "rgb(61, 60, 48)" : "rgb(245, 243, 224)"'
          border-radius: 0px 0px 10px 10px
          height: =(device.desktop)?('2.5vw'):('9.5vw')
      slots:
        default:
          - component: f7-row
            config: {}
            slots:
              default:
                - component: Label
                  config:
                    style:
                      color: '=themeOptions.dark === "dark" ? "white" : "black"'
                      font-size: =(device.desktop)?('0.6vw'):('2.5vw')
                      font-weight: 500
                    text: XXXXXX

but decrease height value from 9.5 to let say 5 doesn’t have any efect.
Any idea how to make it more tiny on the cell phone ?

2

How are you testing this? As long as the device object is getting the correct information then you should should see the responsive change and be able to adjust the value.

3

I’m programming widget on my notebook and checking how it look directly on my notebook and on my cell phone
So I can see directly how it looks.

4
  1. I would recommend using em as a unit instead of vw. That will already be a little more responsive to small screens.
  1. Viewing it on your cell phone should properly show the changes in the height setting, but just in case there is something strange going on, I would recommend testing the device object. Set the label text in the footer to something like:
text: =device.desktop.toString()

And make sure that it says true on the notebook and false on the cell phone.

5

Device object is working correctly, because I can also see influence if I will increase a value (depends on if it’s for desktop or cell phone).
But decreasing has a lower limit which on the cell phone is still too wide. On the desktop it’s ok.

6

Ah, now I understand. Yes, the footer has a minimum height that is set by the f7 variable --f7-card-footer-min-height.

If you cannot reduce the footer beyond a certain height then you are running up against that limit and you will also have to change that value. Rather than work out something different, you should be able to just use the same expression you are using for height or you can just set it to something you know wil always be smaller than your height value such as 1px.

height: =(device.desktop)?('2.5vw'):('9.5vw')
--f7-card-footer-min-height: 1px

That value is there for a reason, so if you lower it and then reduce your footer height too far, you will likely wind up with some strange visual results that will also require further style fixes.

7

Yep, this is solution of my problem.
Thanks