More precise control over the width and height of the viewport

In Adobe software, you can type in exact pixel dimensions in fields when you want to set things like artboard size, font size, etc. And when you hover the mouse over the icon next to the field, the pointer turns into a cursor where you can hold the button down and drag left and right to increase or decrease the number. Lastly, you can use the up and down keyboard arrows to increase or decrease the value by 1 unit at a time.

I think this would be a good addition to the Bootstrap Studio UI where the screen width and height dimensions are currently displayed. There are times when I want to set the width of the viewport to an exact value, but can’t because using the mouse to narrow or widen the viewport simply doesn’t give you enough granular control. It always jumps by two (at minimum.) I realize you can create custom devices, but this is a cumbersome way to just get a specific width for site-building purposes.

I’ve made this simple mock-up to show what I mean…

Also, it would be great if the font size was a bit bigger. The numbers are barely readable now (at least for my 60 year old eyes). The font should at least be the same size as the page name (ex. index.html)

Thanks for your attention @martin

Maybe we can add text fields with the width and height before the first item of the device menu like this:

The arrows on the right of each field are draggable to increase/decrease, like in other parts of the app.

1 Like

Anything that gives more precise control (and is a little easier to see) would be great.