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?
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:
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.
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
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?
i can confirm that disabling the script resolves this issue
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.
