Hi. I’ve updated one of our Hype content areas by adding iPhone and iPad Portrait layouts in addition to our default layout. They would map to the Bootstrap 3 XS, SM/MD, and LG breakpoints.
When I view the exported HTML5 Hype document, the layouts change as expected at each breakpoint. However, when I use the Hype content inside the Bootstrap page, it always uses the largest layout. Inspecting the generated HTML using Chrome shows that the script is inserting the width/height of the large layout, regardless of however the browser is sized. Using the exported HTML I’ve inserted this, however:
I figured it out. I was using combined scale and responsive layouts, which wasn’t working. I removed the scale settings which I must have tried at some point and the layout is breaking properly. Thanks, Daniel.
I am having a similar problem with HYPE animations in a container HTML application that utilizes Bootstrap. In particular, text is being misaligned relative to the surrounding controls or adjacent text boxes.
I tested this fix in both my test case and production app. I added a further series of overlapping alignment rectangles to compare how various elements were being rendered relative to one another.
In general, this fix worked well in webkit browsers (full & mobile). However, there are still some slight misalignments when rendered in FF.