Lovelace Ui config that works in browser and iphone

What’s everyone doing in their lovelace setup for a UI which works both in browser and iin the IOS app ?

In the browser I can set up a couple rows and columns using vertical and horizontal stacks, and get something pretty gridlike. But if I view that in the IOS app, it looks horrible (squished, some items floating in the wrong place, no scroilling, etc). So the only thing I’ve been able to come up with is just to place everything on the page with no vertical or horizontal stacks, which works OK for the browser, and renders to a single column in the IOS app. This way works, but doesn’t look very good in either format.

What’s everyone else doing ? Any good pro tips for setting this up ?

I’m using custom cards that scale correctly.

Something like this? Though it doesn’t look great on a desktop as I have made this specifically for mobile. I use Tileboard for my desktop/tablet setup.

I do use horizontal and vertical stacks though, so the desktop variant wouldn’t look that bad.

https://github.com/jimz011/HA

NOTE: The setup on my github page is not uet updated for HA 0.88 I am almost done fixing it and will push it to github once it is ready.

My config is documented here.

I generally try not to use my phone but when I do it is for a quick check of a status or to turn something on/off. You may be looking for something different.

My ‘home’ screen is the items I generally want a quick glance of. I keep things I use the most in the upper left of the screen and use vertical stacks to group things that I want to stick together. Things in the upper left appear fist in the ios views.

I like your setup. Screenshots on mobile are tight.

There are desktop screens on the github page, but like I said this setup is made for mobile, though I have tried to make desktop bearable. (It is mostly the navigation buttons at the bottom of each page that will make the desktop version look odd. But I want those buttons as they are easier to reach than the top ones.