I’m trying to add a sidebar to a responsive design which is only shown in wide screens, the idea is for the first section to only be shown on my tablet, with 2 additional columns, while my phone would shown only the content without the sidebar section.
The issue is, 1/3 of the screen for a sidebar is too wide and leaves a lot of dead space. Is it possible to:
Reduce the width of a single section section?
At the moment I can simulate this simply reducing the size of the sidebar card, but then this leads to the next issue:
Make sure the other sections fill the rest of the space?
I’ve tried setting the columns to eg. 5 and having each section span 1/2/2, but this doesn’t appear to work.
Also not sure if card-mod works on sections, from what I can tell it does not. If anybody has any ideas on how this could work that would be great.
I have found that screen size changes are too problematic to stick with one design, additionally you can take advantage of different features depending on screen size. My phone dashboard is entirely bubble card. My tablet a mix of everything.
Thanks, this looks interesting but not quite what I’m looking for unfortunately.
My aim is to keep most of the content the same, so I don’t need to update 2 dashboards and they can follow a single design. For now, I’m splitting the first section into a sidebar and a notification/quick action area so I don’t waste as much space, it’s not optimal but it’s better than what I had before. I’ll update with pictures when done, unfortunate that sections is not more flexible at the moment.
I’m only recently starting to dabble into tweaking my dashboards, but so far I kind of agree with ben.poore here. I have decided just to make separate UI for mobile and tablet (and maybe even desktop). They are usable, did not take that long, and then I was able to get on with other things.
But maybe some one comes along who accomplished this, it does sound like an interesting idea.
