When I cycle through the device previews (top right icons), the height always stays the same. It’s very annoying to adjust it accordingly. Device preview on the left works as expected.
Also, it would be great if we could define and save custom resolutions, like in Chrome dev tools. 🙂 Ability to enter them numerically rather than dragging the sides around would also be very welcome.
Height is pretty irrelevant in the end as it will display whatever height it comes out to in the device and as you said, it comes out correctly viewable in the actual preview window. Other than that, is it maybe useful for full page image backgrounds or something?
Other than that, you can very easily add any media query to your CSS that you need for your project to create extra break points. There’s no special coding needed to do that nor does the app or Bootstrap have any extra code you need to add to make them. They aren’t at the top, but you can use this site: https://browsersize.com/
to help you get your browser sizes and add them in as needed. Hope that helps some. 🙂
Thank you for this report! The size switcher on the right works as intended – it is there to help you test the responsiveness of your site according to Bootstrap’s grid breakpoints. For actual device sizes, you can use the dropdown switcher on the left.
The ability to define custom sizes is a great idea, I am adding it to our todo.
Martin – you said “For actual device sizes, you can use the dropdown switcher on the left. The ability to define custom sizes is a great idea, I am adding it to our todo.”
Do you mean to add our own device sizes in the dropdown switcher on the left? That would be great. I have an Amazon Fire HD 10 and the size is 800 x 1112. The only way now to check out how things look is to use the tablet with Realtime Preview. I would rather view it in BSS as I am working on the page.