Resolution change
nickm324 opened this issue · comments
Whats the easiest way to make this fit a 480X320 screen?
It should work to some extent on that size screen, and if you are unhappy with the sizes of some of the elements, you can edit the file src/css/app.css . Down at the bottom there are sections starting with lines like
@media (min-width: 768px) {
Copy one of those sections to make a new one, change "768px" to "480px", and tweak the sizes in the following clauses until you like the way it looks.
Great thanks. Yea it does work ok on my 480x320 screen but there is a big gap under that last row of controls on the screen. I will try the css change and see how that works.
That worked perfectly. In case anyone else wants to do the same thing here is the section that I added.
And an attached image of what the screen looked like before and after using the section below.
@media (min-width: 480px) { [data-route="axes"] { font-size: 22px; } [data-route="axes"] .dropdown-menu { min-width: 220px; } [data-route="axes"] .dropdown-menu>li>a .fa { width: 24px; } [data-route="axes"] .axis-label { font-size: 28px; } [data-route="axes"] .dropdown-menu { font-size: 22px; } [data-route="axes"] .btn, [data-route="axes"] .form-control { font-size: 22px; height: 44px; } }
This is what it looked like before the change.
Issue seems to be resolved, closing