Card is not mobile friendly/responsive

[Borrel88]

When viewing the card on a mobile device, some parts don't show up. On a big screen there is plenty of room, but it won't resize responsive on smaller screens.

See added screenshot.

[FredericMa]

I'm experiencing the same issue. Not everything fits on the screen. Also, the up and down icons are not showing (I can create a new issue for that one if you want.) Anyhow, thanks for this really nice card!

EDIT: The tiny property only seems to remove the padding on the top and bottom of the card but I don't see a change on the left, right or in between the items displayed on the card.

[Devqon]

Looks like you guys use a very small phone, I can only reproduce it with the Iphone 5/SE settings. What is the preferred way to see the buttons? Another row or just smaller buttons?

[Borrel88]

I am using a Huawai Mate 10 pro. Its a pretty big phone. Maybe its the way the official home assistant app renders the card.

Tonight I will try it with google chrome on my phone.

My preferred way is that on a smaller screen, the buttons will stay on 1 row but will be rendered smaller. With a minimum width set so they won't be too small.

I know it's possible with sifferent browsers (chrome, firefox) to render the site in a different size, for phones or smaller screens. I think it's done with the developer tool?

[FredericMa]

I'm using a Galaxy S8 so it's a quite common screen :sweat_smile: I would prefer smaller buttons or maybe better, a smaller horizontal margin between the components in the row. Maybe the margin can be dynamic depending on the available width?

[FredericMa]

In chrome on my phone the row is even bigger:

[aheath70]

Same issues here even on a chrome browser on a 27" iMac. If preset buttons are used in combination with a name specified in the layout section, then the temperature disappears off the side of the card.

Also, irrespective of the name and preset buttons, the temperature up/down chevron icons don't display.