Hi, I’m struggling to format some views to my liking, while still making them responsive enough for use on mobile. I have a few views where I want the first card to take the full page width, and all of the remaining cards to flow naturally with default masonry behavior, all beneath that first full-width “row”.
For example, my door sensor view has one card that shows the history graph for all of my door sensors. And then I have one card for each door sensor after that with more specifics about each sensor. I want that history graph to take up the full page width at the top, and then all of the other cards to flow naturally.
I’ve tried using various combinations of vertical and horizontal stacks, layout-card, and grid-layout. I can get a full desktop web page to look like what I want, but none of these solutions work for mobile, because the remaining cards don’t flow properly.
So what I really want is to “just use masonry”, for the responsive behavior, but have one (or more) individual cards at the top which will always take up the full width, regardless of whether that width is 2560 pixels in a desktop browser, or 1080 pixels on a vertical phone screen.
The ideal solution would also allow for full width cards at any point in the flow, and would avoid nesting cards, so that I don’t have to drill way down just to get to the configuration for any individual card (one of the reasons I like the default masonry view), but I can certainly live without those QOL features.
Thanks for any suggestions or insights.