Hype HTML5 looks different on my webpage than it does in the preview on Hype 3

Hi all

I’ve recently started using Hype and I’m really excited about the possibilities. I produced a Hype file and everything looks as it should on the preview. When I upload it to my website, some of the text has moved position, overlaps images, etc. I guess I can physically move the elements around to try and counteract it, but it’s kind of missing the point.

http://thereasonmag.com/9586-2/

It seems to be an issue on both the phone sized and full sized versions, but when I preview from Hype, they’re fine.

I’m sorry if this has been covered, but I don’t know where to look. Any help would be gratefully received.

Sounds like the CSS from your website is interfering with the elements in your scene. Is the “protect from external styles” option checked in the document inspector?

Can you set a line height set on the text which is overlapping? That might help resolve the problem for you. You can set the line height in the Text inspector: the default (normal) which you have set on the text sometimes doesn’t give you the same results in all browsers, especially for large columns. I find that Firefox is usually the worst offender when it comes to line height.

Hi Gxxr

Thanks for your input. ‘Protect from external styles’ is checked. Is this correct?