First of all, I can see there has been a huge amount of work gone into this beta, and already found quite a few things not quite work right which I shall log shortly
in the mean time, the screen width display is not showing anywhere. I realise this maybe due to the upcoming native responsiveness. can you confirm either way please?
I was wondering the same thing. 
It’s Magic!
It’s coming back! You’re right, it’s related to the responsive styling updates. Long story short we don’t have the backend for that solved yet, but we have the UI prototype to work with it. So we can’t hook it up yet, and we didn’t want to waste time rebuilding the old functionality in the new system.
The new UI is built around having all five breakpoint icons in the bar. I think what we can do for a stopgap in the next beta is putting those icons in and having them simply set the preview width. That will bring the old functionality back in a round about way without having to wait until all of the responsive styling stuff is built out.
Thanks that is good to know… also liking the idea of the stopgap while the responsive styling is built
awesome, we’ll start there.
I have a thought about the breakpoints. Something that I find does not quite match the workflow of designing. I will have to explain it with an example. Imagine two neighboring sizes (e.g. MD, 768-979px, and SM, 481-767px) Right now (not in beta, but in the latest release) if you pick MD, it shows the layout in the widest pixel-width of that range (979px). In my opinion, this is not right - it should show the smallest width (768px). Reason: Normally, I want to know if a certain layout still fits into that breakpoint (e.g., do 2 columns still fit next to each other in the MD breakpoint, or do I need to chnage to the 1 column layout?). Seeing the widest version of MD doesn’t answer this. More often than not, I find myself going to SM, see if two columns work side-by-side or not, and then go back to style the MD breakpoint. Maybe it can also be a preference setting to pick the narrow or the wide end of each range when clicking one of those buttons? Or, maybe even more convenient, toggle between the wide and narrow range when repeatedly clicking on them?
Really great perspective to share here. I see what you mean. Will keep this in mind while we work on getting responsive styling finished.
+1 to all that.
I usually want to know how the layout will look on popular devices (iPhone 11 vs Pro Max, popular Android phones, etc.). I know supporting exactly that within the builder gets too complicated really quickly, so being able to control or measure the preview dimensions in some way would be nice too.
Why this is important to me is that I like doing subtle animations at different points. And with the new animation controls, I can set an element to fade-out in the top 10% of the page. However, when I’m previewing a SM breakpoint on a big monitor, I can’t properly visualize where the element would leave the view (since the preview is roughly 2x taller than a phone’s screen, meaning that 10% is much larger). So being able to precisely control the width & height of the preview would be useful in that use case.
However, even without explicit controls, we are able to pretty easily change the width of our browser windows - so another option is dynamically displaying the preview width & height measurements so we can resize our browser window to the appropriate dimensions ourselves.
< /spitballing >
@scotbaston, @Misho, @striata & @devinelston,
Just wanted to chime in here to say there’s a lot of good thoughts going around here. Specifically to @striata’s point of where the breakpoint should default to (min or max value), I think that’s a great point and something we will certainly consider as we move this content back in. As for @devinelston’s ideas, I actually prototyped out an idea early on in this cycle of how I’d like things like this to be represented (such as showing common devices sizes, et cetera):
This is still a little fluid at the moment, but the idea is that the preview would be continually resizable like your browser, but as you hit certain key breakpoints where many devices are used, a list of little tooltips would show up, allowing you to see what devices you’re targeting at that size. I went and did some research at that time and created a big master list of the most common devices:
const devices = [
{
min: 320,
names: ['iPhone SE', 'iPhone 5s', 'iPod Touch']
},
{
min: 360,
names: ['Galaxy S9', 'Galaxy S9+', 'Galaxy S8', 'Galaxy S8+', 'Galaxy S7', 'Galaxy S7 Edge', 'Sony Xperia XZ2', 'Huawei P20 Lite', 'Huawei P20 Pro', 'Huawei P10', 'Huawei P10 Lite', 'Google Pixel', 'Nexus 6']
},
{
min: 375,
names: ['iPhone 11 Pro', 'iPhone XS', 'iPhone X', 'iPhone 8', 'iPhone 7', 'iPhone 6', 'iPhone 6s']
},
{
min: 393,
names: ['Pixel 3 XL', 'Pixel 3', 'Pixel 2 XL', 'Pixel 2', ' Pixel XL', 'Nexus 5X']
},
{
min: 414,
names: ['iPhone 11 Pro Max', 'iPhone 11', 'iPhone XS Max', 'iPhone XR', 'iPhone 8 Plus', 'iPhone 7 Plus', 'iPhone 6 Plus', 'iPhone 6s Plus']
},
{
min: 480,
names: ['Kindle Fire HD 7', 'Galaxy Note 5', 'LG G5', 'LG G6', 'One Plus 3']
},
{
min: 600,
names: ['Kindle Fire (non-HD)', 'Galaxy Tab 2 (7")']
},
{
min: 720,
names: ['Surface Pro 2', 'Surface Pro']
},
{
min: 768,
names: ['iPad Pro (9.7")', 'iPad 2017 / 2018', 'iPad Air / Air 2', 'iPad 4th gen (and earlier)', 'iPad Mini (all models)', 'Microsoft Surface']
},
{
min: 800,
names: ['Galaxy Note 10.1', 'Galaxy Tab 3 (10")', 'Galaxy Tab 2 (10")', 'Galaxy Tab S', 'Galaxy Tab 8.9"', 'Kindle Fire HD']
},
{
min: 834,
names: ['iPad Pro (10.5")']
},
{
min: 912,
names: ['Surface Pro 2017 (Portrait)']
},
]
So as you hit those pixel sizes for a device, their corresponding tooltips would show. This will really help in targeting certain devices, and then as you’re resizing a highlighted breakpoint would also show you what you’re currently operating in as it pertains to the theme itself. The ruler you’re seeing at the bottom would only be visible while resizing the preview, but it gives you a nice little way to target certain sizes.
Again, all of that is still a little fluid at the moment, but just wanted to share some of the concepts we’ve been working on behind the scenes with regards to these matters.
Update: In the next patch we have added the bar buttons for each breakpoint. Those actions are becoming more prominent because in responsive styling our intention is to let you change values on a per breakpoint basis, and it will help to always clearly see which on is active at that point.
Edit: So minor change from my comment yesterday. We’ve configured this to work exactly just like it did in the last version. We may need to make more changes when we get deeper into responsive styling, so at least in that case the behavior won’t be changing twice.
@Alexander – I noticed that none of the mobile size changes show up in the preview. They do, however, appear to be reflected on the actual site. See video in note.
All patched up.
Hey @kory and @alexander, I know this is an old thread and you’ve been asked this a million times, so apologies in advance haha. I was wondering if the responsive styling is going to be part of Pro 4 in the later stages, or is it more likely to be for the next major release like Pro 5?
No problem! It won’t be Pro 4.0, but most likely in 4.1. It’s the top priority on our list of bigger features.