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 
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.
2 Likes
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.