The key issue is that Hype’s ‘fully responsive’ feature looks at the available width & height of the element in which it is embedded. This works well when Hype elements appear in their own page, but is at odds with the majority of responsive designs (Wordpress themes) which assume that the content areas have a determinable height.
Instead of using Flexible Layouts, use the Responsive Layout feature for embedding in Wordpress This exports a document with a set width / height that does not use percentages. It is the
height:100%; value on documents with flexible layouts that causes this problem.
Or, set a minimum-height on the actual Hype div if you are using Flexible Layouts. Or even better – create responsive layouts that don’t have the ‘height’ scale option checked.
This video takes you from a non-responsive document all the way to embedding a Wordpress document on a page: