How can I make lovelace mobile friendly?

Configuration
1

For example I have a whole page with Light Cards. It looks ok on desktop, but on mobile it is just one giant icon per row and it is ridiculous. How can I change how they look on mobile?

2

You could try using horizontal-stacks with 2 - 4 light cards in each, that’d make the cards smaller on the desktop too.

or use a different card such as entities:

image
image1052×1428 253 KB

I use custom:slider-entity-row to give control / visibility of brightness without opening the entity.