That means 1.5 viewport width. Essentially means it will change size based on the size of the containing element. In this case, it means the card. Specifically width.
You can try using:
font-size: 4vmax
That may get you a larger size.
First thing I notice in general is that your icons are HUGE on mobile.
I had this in reverse, my mobile view showed state-labels bigger than desktop. Used the font-size: 1.5vw and all is good now, you learn something new every day on here. Thanks @Jsreb@petro
@petro so âvmaxâ didnât fix it completely. Iâve had the best luck with âemâ, âpxâ, and âptâ. However, I still have alignment problems. Itâll be centered on the desktop but hanging off the edge in mobile. Do you have any tips for centering text?
To your point about the icons being huge, I think they look big because the picture is cropped. This is just the iOS app. I have three columns on this page. That black/gray card is only half the width of the first column and therefore half the width of the phone screen.
Why are you using the picture elements card for this then? You can use the custom:button-card which has way more CSS control. And everything is always centered. Just my 2 cents.
Good call. I didnât think to use the button-card. I have other cards with text overlaid on pictures. It looks like the button-card will work for those too.
Hi, sorry for re-opening⌠Is there any option to âstop the text shrink/alignmentâ from âfitting belowâ the icon? I mean for longer entity names every word is below each other for longer names