▼
Streaming live at 10am (PST)

Stuck in responsive no man's land

Design help General
#1

I’ve got a somewhat tricky home page hero that is misbehaving in what I realize now is a sort of responsive no man’s land between 780px and 991px. Because the tablet mode restricts my working view to 780, and the desktop mode won’t let me make any selector edits when my window is less than 992, I can’t mess with my selector settings and see the changes as I make them, which is 100% necessary for this layout. (It’s just too touchy and experimental for me, it’s taken a long time to dial it in even with live updates; If I tried to publish and view after every tweak I’d be on it until the end of time.)

I assume that most layouts just don’t have the tricky stuff going on that I’m trying to do, and that the bridge between desktop and tablet doesn’t typically have these kinds of issues. But I’m really stuck and need to go live asap at this point!

Is there any trick or workaround to let me actually edit with live preview between 780 and 992 px?

https://webflow.com/design/wonderguidesherotest210140811?preview=70b478225d2fc9a1c51719321310e288

Thanks!

#2

For the time being, it’s not too bad a workaround to size my working window down, see the problem, size it back up, edit, size it back down, etc. Obviously not great so any tricks to see live preview in no man’s land would still be really welcome…

#3

I’m confused about what you’re running into. If you’re editing the Tablet media query (for tablet devices with resolutions 780px to 991px) why don’t you go to that media query and design the site for that media query there? Then you will be able to edit your selectors and have your settings available. You don’t need to resize your window to view this media query - You can just hit preview and see it there for that media query. Unlike media queries for phones where Containers fit 100% of the width of the device resolution, the container for Tablets have a fixed width - so what you see in Webflow is what you’ll see for that media query every where else.

Webflow_-_Copy_of_WonderGuidesHeroTest2-2.png1029×522 558 KB

Let me know fi this helps. Maybe I’m not understanding what you’re running into.

#4

I did design it in the tablet media query*, and your screenshot reflects the layout I’m going for. The problem is that at about 820px, my layout breaks like this (phones jump up about 60px; headline crashes into images), and stays wrong as I resize the browser, up to the next media query at 991px when the desktop layout kicks in. Here’s what it looks like in that 820-991 range:

tabmedia.png820×430 563 KB

That’s a pretty big range, and though the tablet media query is controlling this view, a lot of desktop browsers are going to be set at some size in there and see this.

Since the tablet media query editing view is locked at 780px, I have no way to touch those misbehaving phones in the act, and experiment with fixing them in the widths where they are doing this.

Here’s an idea: The desktop media query editing view expands and collapses with the browser window and puts up the nice obvious red alert bar to tell you you’re viewing it outside your current media query parameters. It would be great if the tablet and phone views worked the same way.

It seems like since the tablet media query is controlling all views within the 780-991 range, I should be able to work at any of those widths and just get the red alert bar and tool lockout if I resize smaller or larger. It would certainly make figuring out my current problem easier, but it also just seems like a natural way for the media query working environment to function regardless, and would give us confidence that there weren’t any odd things happening at any size within each media query.

Hope that makes sense, if not I could record a quick screenflow.

Thanks!

*Which I’ve been calling “mode” simply because I get tired of typing “media query” :wink:

#5

I should note that my workaround is keeping me moving on this so I’m not actually stuck anymore, but it’s definitely not the optimal way to work the problem, and I would sure like to have those other media queries workable at their whole range of widths, not just a single frozen one.

Thanks!

#6

Oh okay @ramatsu I see what you’re getting at. I totally agree that currently it’s hard to see live the range of resolutions instead of having to go to Preview and resize there to see how it will behave. We’ve been thinking about how to do this well - either give you guys the ability to edit the media queries by sizing down the browser or by giving you a little grab handle in the different media queries that you can drag and see how the layout will behave in that media query (this will give you a range to play with instead of only seeing 780px).

Thanks for your input and we are definitely thinking about improving this. :thumbsup:

#7

Cool, thanks! I’ve got a whole UI conceived for the way I’d love to see it work, if I can get some time I’ll shoot over the suggestion.

#8

That would be awesome! I’d love to see your ideas.

#9