Iām curious in how I can get this to be responsive across devices. I have been using the grid layout thinking that would be the best approach, but as Iām finding out, something thatās working on a tablet doesnāt quite respond well onto a mobile phone. Iām wondering if thereās something Iām missing or doing incorrectly?
Even though percentages are acceptable, it doesnāt allow for example, in row 1 with two columns, and row 2 with three columns, when the screen size decreases, column 3 row 2 doesnāt fall below.
I may have to use your previous suggestion to see if i can make that work.
Another way to go about it could be by combining my state-switch card (for switching between different layouts depending on screen width), layout-card (for building the layouts) and q-card (for not having to define the same card several times). Thatās probably easier to fine tune.
@thomasloven, so if I think Iāve gotten something to start working.
I have. a question though. When Iām utilizing vertical is it possible to have something like my image below where row 1 i have two columns, and row two i have three?
The problem I see with how I am trying to do it now is i can add a third column to row 1, but it would be empty and iād prefer the two columns on row one to be fluid from end to end.
Ha. Yes! Found out what rtl was standing for. Felt silly once i figured it out. haha. I will give the stacked layout-cards a try to see if that helps me out.
Great! I was kind of thinking so, but I wasnāt sure.
One thing I can see being super beneficial would be to enable the grid system to work responsively. I like how i can span cards, but they end up being static. Maybe itās not a bit deal and I will just have to live with having a ābig buttonā with two other columns next to it, but it would be nice to be able to shrink columns and the others become responsive and slide over.
For now, Iām going to continue trying to make this work.
I use grid quite a bit, but I have to say - itās not the best for truly responsive layouts. Nor can I see how it could be, itās all about placing things exactly where you want - kind of the opposite to responsive.
I use separate dashboards for portrait and landscape, layout cards to control layout and !include for individual ācardsā that I reuse between views. I also use lovelace_gen to further reuse ācardsā with different parameters.
My ācardsā are usually yaml files with embedded layout cards or stack-in-cards with several lovelace cards, controlled by lovelace_gen variables.
Totally understand where the ārepsonsiveā grid may not be the best use case there. Iām thinking of it from a bootstrap outlook in a home assistant way.
The biggest thing Iām struggling with now is if I have two columns in row 1, three columns in row 2. column 1 in row 2 maybe isnāt as wide as column 2 and three are. if i do that currently, I have to have a big gap between col 1 and col 2 and it just looks odd.
Again, iām not sure what I"m trying to accomplish is actually achievable without utilizing the grid layout. The only downfall to using the grid layout is responsiveness for me.
Hereās a screenshot where Iām trying a dashboard for my tablet. The problem is I didnāt want a huge button and was trying to get it where my weather card and perhaps the camera columns would āadjustā and move left where the column ends on the button-card.
When using the layout card, I have the following problem: if I open the input-select and the selection consists of a long menu that goes beyond the screen, then the screen starts twitching. This can be seen in the attached video.
And without a layout card, there is no defect.
Can this be fixed?
