How to properly align dashboard cards down middle

i am building my mobile dashboard and i want all the cards down the middle centered.
On my PC, it seems to be shifted to the left.
on the phone it looks fine.
is this by design, or can I actually move the cards over to the right a bit so they are centered?
I tried masonry, but it would try and fill up space by putting two cards next to each other.

Have you tried View type - Panel and then use a grid card?

If you’re building a mobile dashboard and it looks fine on your phone, what’s the problem :slight_smile:

If you just want a single column down the middle, put everything in a vertical-stack, it’ll look the same on mobile but won’t spread out to use desktop space better.

Or try nesting in a grid card, you can control the number of columns on the desktop, but won’t get a single column on mobile.

The custom:layout-card gives you a lot of control but setting a single view that looks really good on desktop and mobile is (IMO) tricky.

Back when I cared, I used to define “cards” (mostly groups of related stuff in a grid card) in seperate yaml files and then !include them in different views that I created for mobile and desktop. That way the main view was controlled according to device and the detail was defined in each !include file so I didn’t have to duplicate.

Now I have decided that what I (or others) want on mobile, quick access to basic controls and key info etc. is nothing like what I want from a desktop view - detailed graphs, charts, lots of info …

1 Like

you should be using masonry but use stacks to keep things where they should be. Sidear is going to put it on the side.