Breakpoint in my responsive layout

Responsive Flexible Layouts
1

So I am embedding a project via iframe, and locking it at its 16:9 ratio, but taking up 100% width/height.

However, I’d like a breakpoint at about 480 so if it’s on a phone, I can prompt the user to rotate their phone and block the starting of the scene. I can’t seem to be able to dictate the upper size of the breakpoint, only the lower breakpoint, and multiple layouts.

I don’t want stepped breakpoint layouts. I want one layout for a custom max-width, and my main layout every other time.

What’s the best way to go about this?

2

Never mind. Figured it out, but can’t delete my post?

3

Maybe you could share with others how you did it? :wink:

1 Like
4

Ok ok. :stuck_out_tongue:

So in any scene, the breakpoint refers to the lower side, so to change the breakpoint on the top end, you have to go to the next scene size up, and change the breakpoint there.

It makes sense, but the UI in Hype doesn’t really inform it all that much. Much like it sort of infers that the only scene sizes are the iPhone, iPad, Desktop screens. When really, it can be anything.

1 Like
5

In Hyde you can choose the layout width (any) but also a different value for the breakpoint in the same layout. This is not easy to understand but is very useful

6

Advantages, disadvantages, reasons for doing that?

7

Well in my use case, I’m creating an embeddable piece of content, locking my layout to 16:9 (like a video).

On a phone held in portrait, it’s a bit too small because we keep the text the same size (scaling text proportionally would make it unreadable).

I want to prompt the user to turn their phone to landscape in order to eke a bit more real estate for the viewport and make it viewable on mobile.

Currently my breakpoint is between 200 and 400 shows the rotate icon.