How to get my cards to stop overlapping?

Share your Projects! Dashboards & Frontend
1

Hi!

I am almost done with my dashboard for my wallmounted tablet - so far so good.

The only issue I have currently is that my cards start overlapping when I resize my window, so on my tablet they are overlapping too.

I have the buttons set to a static 200 x 200 px, as that looks reasonable on my tablet.
Basically, I could sove this I guess if I could control the size of the calendar card on the side, as I do not want that to be very wide - same for the weather card, that I even consider dropping.

How can I fix this? :open_mouth:

This is how it looks when there is “space enough”:

ui1
ui11881×1211 1.08 MB

This is how it looks when I resize it:

ui2
ui21047×1195 753 KB

This is how my code is layed out in stacks:

ui3
ui3450×639 38.1 KB

2

break your horizontal stack in to more horizontal stacks.

Your issue is that you have stacks that are x amount wide and when you resize they are still, x amount wide.

I believe there is also a cusom ‘break’ card that would probably help. it’s probably over at www.awesome-ha.com