Designing a ui which is properly aligned for both mobile and ipad

I have designed a ui in lovelace.yaml which fits perfectly on mobile screen but in ipad the cards are not aligned properly. is there any way that i have to design only once and the ui adjust same way automatically as per the screen size,for example in mobile i have created 1 horizontal stack card in a row ,but in ipad it takes 3 horizontal stack cards in a row is there any way to restrict it to only one card in a row :expressionless:

I don’t think this is currently possible. You have to create separate views for mobile and iPad.

It took me a long time to get something that looked good on an HD PC display, an iPad and an iPhone.

There are still a few compromises but basically the key is using the gap card to break up columns where you want.


have a look at my UI if that is what you are looking for?

Basically i forced everything into a vertical stack and created horizontal stacks inside. Only one row on every device.

Lovelace could do with a complete CSS Grid overhaul, IMO β€” it’s a perfect application for that.