Change fontsize of oh-cells

Setup, Configuration and Use Beginners
1

Hello everyone,

is it possible to adjust the font size of oh-cells? Because every cell looks fine on a PC or tablet, but the text is alwas cut off on my phone. Here is a screenshot from my PC/phone view:

https://imgur.com/a/VxAOP5T

It would be really cool if the text would auto resize depending on the screen width of the device, but I don’t know if that is possible.

2

Welcome to the forums!

Yes…but…

The cells family of components do not have a built-in setting to change the font-size. But you can use direct css statements to modify just about anything in a component with the stylesheet property. This takes just a couple of steps:

  1. Use your browsers page inspection tool or page source code viewer to identify some css selector that will apply to the element you want to modify. In this case you will find that the css class item-title is unique to a card’s title text.
  2. Add the stylesheet property to the widget to some level above the element you want to change. In this case the element you want to change is a child of the base oh-cell you can just place the stylesheet property on that cell.
- component: oh-cell
  config:
    title: Big Title Text
    stylesheet: >
      .item-title {
        font-size: 32px
      }

This is actually one of the things that it is most difficult to do with css because it goes completely opposite to one of the the original philosophies of css which is to control how all the other elements change around the text to keep the text readable (I have seen rumors that there are plans to improve simple text scaling in the next css version).

The problem you’re going to run into with the stylesheet solution above is that this is one of the few places in the widget code where you can’t use the dynamic widget expressions. So you can define a custom text size, but it is still not responsive to the whether the widget is displayed on a phone or a desktop.

To get that last piece of the puzzle you need to use css variables. These you can define using the just the style object of some component that the oh-cell is a child of and then you can refer to the variable in the stylesheet. In this case because you want to have two different values based on the screen type, your best solution is to use the device object to see if this is currently a desktop browser or not.

component: f7-page
config:
  style:
    --my-cell-title-size: =(device.desktop)?('32px'):('12px')
slots:
  default:
    - component: oh-cell
      config:
        title: Big Title Text
        stylesheet: >
          .item-title {
            font-size: var(--my-cell-title-size)
          }

All of this will take quite a lot of fine-tuning in your case so before you start down this road, it’s worth thinking first about whether or not there’s just a sensible way to make your cell titles just a little shorter. You can employ the same kind of device.desktop expression in the cell titles so that the full title is displayed on the desktop browser but some abbreviation is displayed when viewed on a mobile.