Whilst ArduPlotter has always been responsive (utilising the Bootstrap framework), it hasn’t always used all of the available screen space. This was especially true for large screen devices (1200px+ wide).
I have updated it so that if your browsers is larger than 1200px, you will get graphs to the right of the map instead of below it. This allows a lot more of the information to be viewed simultaneously.
To achieve this I have added some media queries in the CSS to change the bootstrap ‘fixed’ width container into a fluid width container that will fill the entire width of the screen.
@media (min-width: 1200px) { .page-view-log .container { width: auto; } }
However having two graphs side by side and a width of 1200px to about 1750px resulted in very squished graphs, so to fix that I made the graphs full width for small-largish screens (1200-1750px)
@media (min-width: 1200px) and (max-width: 1750px) { .data-graphs .col-md-6 { width: 100%; } }
I’ve also fix the position of the map on the left so if you scroll down it is always visible.
@media (min-width: 1200px) { #mapContent { position: fixed; width: 41%; } }
If the screen size is smaller than 1200px you will get the previous experience, with the fixed width column and graphs beneath the map.