Another update. Thanks to the tip from @chriddyp, I’m much closer to having a fully functional mobile layout that works for all browsers (as mentioned by @RenaudLN ).
I’ve set automargin for the x and y axes as well as manually reduced some of the margins. As far as I know, plot margins can only be set once for all screen sizes in python.
Additionally, I moved the legend into the vertical margins instead of the horizontal margins. I did not move it inside the graph as suggested due to the modular nature of some of my graphs where the legend can grow quite large and obscure a lot of the data. I also have additional annotations on some graphs that I decided to place under the title to act as a subtitle. As far as I know, legends can also only be set once for all screen sizes in python so you must select a location that looks decent for all screen sizes.
Before:
After:
This can be made to look decent on all screen sizes when you target the title (className=“gtitle”) and annotation (className=“annotation-text”) font size with media queries. However, I’ve ran into two new issues shown in the gifs below:
Issue 1: The legend is oriented horizontally but randomly goes vertical. This can be triggered a number of ways (e.g. resizing the screen, zooming, etc.) and appears to require continuous screen resizes or a full page refresh to fix.
Issue 2: At certain screen sizes (seems to be dependent on how many parameters I’ve selected in the multi-dropdown), the graph does not resize properly as the window grows. However, it seems to usually correct if I shrink the window back a bit as shown below (Issue 1 also on display in second gif during the screen resize).
At a bit of a loss on how to tackle either of these remaining issues. If anyone has any thoughts on next steps or has seen something similar before, let me know!