Is possible to create responsive design CSS?

Development
1

Is possible to implement a responsive design in the actual CSS!?
I have a 24'' screen with a resolution of 1920x1080 and i want to use those white areas.

Immagine
Immagine.png1920×1080 196 KB

For example i want to move the Connection and State tab to the left. Move up to a single column the Files tab and maybe enlarge all the remaining tab to occupy all the right white area.

Is possible!?

2

Absolutely. Google @media query css and make magic happen.

Typically, you add the "breaking CSS" at the bottom of a style sheet and tweak the things that were seen earlier. You attempt to make the minimum changes required to move things around.

I don't claim to know it all in this area but the bottom of this stylesheet has some @media queries which I created to target specific computers/resolutions/orientations.

3

Thank you for the reply!
I'm not very able to edit CSS and webpage (only very limited html code). Which file i need to edit in the octoprint folder?!

I have a raspberry with octoPi updated to last octoPrint 1.3.8

4

Try

If I remember correctly it also works in the other direction, as in making stuff wider on larger displays.

5

Thanks but the screenshot i made is already with ScreenSquish installed. Indeed if i remove the plugins the box are more shrink...

i must investigate into the CSS file of ScreenSquish