How can I make lovelace mobile friendly?

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?

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:

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