Hello,
I’m testing a responsive hype page for mobile portrait view, I want to display empty content when the mobile in landscape mode.
all pins and sizings work well in 320x568 layout, but after I add a 568x320 layout, there are problems in the portrait mode.
responsive_and_layout_test.hype.zip (21.3 KB)
if you delete the “custom layout” then portrait mode works again.
thanks for any help!
What is your testing mode? I get varied results depending on how I am testing…
The browser, browser mode (“standard” or “responsive”) and Hype’s “Reflect” app.
For instance, using your exact elements - but changing their properties - both Chrome’s responsive mode and Hype’s Reflect app appear to perform inaccurately…
I turn off all flexible options for all elements (removed the bottom & right pins of your small individual rectangles). The two Groups never had flexible settings to start. I also turned off the “Scale” settings on the Layout Inspector.
Then I deleted the “568 & up” layout.
At this point nothing in the Hype project should be responsive at all… yet when I use Chrome in responsive mode and Hype Reflect in responsive mode all the rectangles expand to fill the width of the screen.
This should not be happening. Safari in responsive mode shows things correctly, nothing expands, all elements remain static in size.
Using Safari & Chrome in “standard” mode with your original set-up yields the same results in my tests - no flexible response - with or without the second layout in place. Your individual squares are pinned on all sides but your Groups have no flexible settings.
Hi,
Thanks for the reply.
This project is targeting only mobile device(portrait mode), that’s why I added a blank layout when width breaks 568.
I’ve tested it under both Safari and Chrome’s “responsive design mode”, both result with position shifting and inaccurate size.
Then I group some of the rects on stage, apply flexible layout on the group, it is still inaccurate.
Finally I checked the “zoom contents”, this (seems) fixed the problem, with a lot of flexible layout settings on every rects and groups which made by some rects on stage.
I’m just curious, is there a “standard way” to do the layout which can totally responsive( with every element’s size and position, relative position) from iPhone5 to iPhone 7 Plus?
You might find the following thread useful:
@michelangelo's response and example file in the same thread may lead You to new horizons.
I have found "responsive~fluid" layouts in Hype to be an art and a science. 
Knowing what to apply & when.
This is really helpful, thanks a lot!