RC4 device breakpoints

Beta
#1

I’m not sure if this was brought in in RC4 or RC3 but I like the new simple version of the device views but I always found it useful having the actual sizes there in case I needed a reminder of them for doing some custom CSS.
For example right now I need to do some background positioning for different devices and it’d be good to have reference for each breakpoint.

or (Feature request) adding a quick media query add per breakpoint to the custom CSS pane?

4 Likes
#2

I agree with this.

I really like the new simplified layout BUT I work on so many different things, some WordPress, some custom, some Bootstrap etc. and often go to this section to remind myself of the break points specific to X/Pro.

#3

Hi @RubberDuckers,

That makes sense. Perhaps we need to find a way to represent that again. Or maybe there could be a way to quickly inject breakpoints into the CSS editors. We’ll keep this in mind. For the 2.6.0 release, it might not be something we change again. We started making these adjustments because the Layout Builder is on the horizon and we are moving slowly towards some UI adjustments needed for that. We also want the breakpoint controls to be less invasive while working with the new Grid editing interface that we’re currently working on.

#4

Even just a title tag / tooltip so if you hover over the break point it shows the min max range. Just somewhere where it is easy to get a quick reminder on the X/Pro specific points.

#5

As @urchindesign just suggested, that’d be great.
I agree having it smaller is generally nicer and doesn’t take up any screen real estate when editing which is great. but either a tooltip or tag underneath - doesn’t have to be much, just the brackets of sizes.

Looking forward to playing with the Grid soon, too!

#6

Makes sense. I’ll see if we can look into this one more time before the release.

1 Like
#7

That would be awesome. It is one of those things that is really nice to have as for some reason my brain does not like the space required to remember them.

1 Like
#8

I have used to use this code to have the live width & height displayed in the corner, but it stopped working. Does the fact that such code isn’t working anymore indicates that there is a new conflict?

var el = document.createElement("output");
document.body.append(el);
Object.assign(el.style, {
 position: "fixed",
 bottom: 0,
 left: 0,
 background: "red",
 color: "white",
 padding: "5px",
 fontSize: "11px",
 opacity: 0.7
});
function updateOutput() {
 var html = document.documentElement;
 el.value = html.clientWidth + " × " + html.clientHeight;
}
window.addEventListener("resize", updateOutput);
updateOutput();
#9

Hi Misho,

I’ve tried your code and it works for me. Shows the little red box in the bottom left corner. Great idea! Not sure why it would have stopped working. Looks pretty straightforward. z-index collision perhaps?

#10

Hi Alexander!

Ok, it is important that this is not Beta related. It must be something local then. I have noticed that the red square is flashing a bit on scroll, but disappears when scrolling stops.

It must be something on my install. I see now that it indeed is z-index. It goes below all sections, although I don’t recall changing it. I will investigate. It is nothing important.

Thanks!

#11

Thanks Misho! Sounds good.

Quick update on this topic. We’re leaning towards the tooltip on hover as the final solution for this release. Still need to design that and get it in place, but we will have something before the official release goes out.