Reverse the direction of breakpoints

(Hrishikesh Kokate) #1


I’m making a website in Hype and completed the desktop mode for it. The responsive feature was perfect. I just had to design the 1200px layout and Hype managed to make it smaller or larger according to the device width. However, I wanted a bit of different look on mobile devices because the text shrank too much from 1200 to 420 and less. So, I created the required layout for my home page and then noticed the text under the layout which said 420 - 1200px. This kind of shocked me, because, what I was expecting was the opposite. I wanted a 1200 - 420 px layout, meaning, Hype shrinks the content till 421, changes to the new layout at 420 and then continues shrinking according to that. What’s happening now is Hype is enlarging the contents from 420 layout to 1200 and thus, everything is getting too huge. I want the content to enlarge, but, not this much.

So, basically, I want the layouts to be like: I design the content at 1200, it shrinks till 421, at 420, it adapts the new layout and shrinks further to whatever the browser width is. As of now, I have to design 1200 and 420 layouts and would like to avoid adding more breakpoints, because arranging all the contents is no doubt, a pain.

So, is there any way around this, or do I have to make a breakpoint in between?

(Hans-Gerd Claßen) #2

you can set the breakpoint independent from the layoutdimensions …

(Hrishikesh Kokate) #3

How exactly is it done?

(Hans-Gerd Claßen) #4

within the inpector you can add any value as a breakpoint … you may add an example-document that clarifies the requirements

(Hrishikesh Kokate) #5

Here’s the file:

Broken (2.5 MB)

(Hrishikesh Kokate) #6

So, I tried that. This is done on based on what I understooad and thought I should do.

I set the breakpoint width in the property inspector as 421px and I have another layout at 420px. But, this hasn’t really fixed my issue. The following video better explains my problem:

Video (around 2 mins. - 65MB)

So, as you can see, when I open the preview in Chrome and then maximise the screen (from screen width < 400 to screen width = 1920), the content stretches too much. So, I went to developer tools and checked the responsive variants of my website there. The mobile (small) variant doesn’t show any content, while, the mobile (large) variant shows content at 1200px, however, the tablent variant shows the correct size and so do the variants after that. However, when I return to the smaller variants after checking the bigger variants, the smaller ones also display correctly.

What can be wrong?

(Hans-Gerd Claßen) #7

please try:
Broken (2.5 MB)

(Hrishikesh Kokate) #8

It’s giving the exact same problems are the video above, only, at different breakpoint now.

(Hans-Gerd Claßen) #9

if you set a breakpoint to a layout this layout should be shown until the next breakpoint of another layout is reached … if this is not what happens to you. -> please contact @jonathan :slight_smile:

(Jonathan Deutsch) #10

It looks like problem stems from using a custom HypeLayoutRequest listener in your head that is modifying the document size and overriding Hype’s standard behavior for changing layouts. What is that for?

(Hrishikesh Kokate) #11

That thing in the head is because of this: Page content getting clipped

(Hans-Gerd Claßen) #12

Broken (2.5 MB)

i can confirm that disabling the script resolves this issue :slight_smile:

when changing hypes wrapper-div from outside the doc needs a push to relayout its elements … though this function is called after resizing, in this case it does not show an effect.

i tried to simply delay the function-call … seems to work … though not sure if this is robust.

please check it out :slight_smile:

(Hrishikesh Kokate) #13

As of now, it seems pretty robust. Thanks a lot!