I’m finding the easiest way to deal with displaying data on desktop vs. mobile is to create two totally separate views that are displayed based on screen size.
The other thought I had was to hide/show different elements based conditions, but that just seems like an excessively complicated way to handle things.
You can do what ever feels confortable for you, but i think you are not following mobile first principles as well as flexbox hierarchy methodology
Highly recommend these videos: https://www.youtube.com/watch?v=eaIdxpri4B0
I agree with @jefeoliveira22 , I highly recommend you learn and use responsive design.
I would suggest starting with these links:
The best way I learned was just trial and error by doing. I hope this approach works for you as well!
Thanks! I appreciate it. I understand the concept pretty well, and I have watched some videos.
My app is spreadsheet data, so it’s wide with labels going across the top.
When viewing on mobile, the width just isn’t there…so I have to move the labels from the top to the side because my data is moving from a row to a column. A lot of information simply has to be excluded which would mean conditional logic to eliminate information based on various page widths which…isn’t really responsive.
I’ll keep chipping away at it.
I probably just need to spend more time thinking about the design and how it can flow better once I get things laid out a bit more. I probably should have started with a mobile first approach, however this app is really designed for desktop users…but the information still needs to be accessible from mobile because it’s 2024.
