The layout of my document changes when exported

Responsive Responsive Layouts
1

I’ve made a portfolio to show some of my work, but when I export it to a HTML5 file and launch it in the web browser, the scaling is nothing like what was shown in the project preview

I know it possibly has something to do with the flexible layout (which I’ve had issues with before) but I’ve tried different variations and nothing seems to work.

Anyone got any ideas?

Thanks,

Squiddy_Gubbins

2

Please include the file or a preview link… otherwise we are guessing into a dark room about your setup and the circumstances. Best regards

3

Hi Max,

The file is too big to upload to the thread. I can email you the project instead if you want?

Best regards

4

You can use services like https://wetransfer.com/ if your project is too big…

5

That’s a good idea tbf, but I still need an email address to send it via WeTransfer. I can send you over the project to look at if you want?

6

Here’s an image of my website, which works in the chrome simulator perfectly

02
Screenshot 2019-08-27 at 11.43.02.png2880×1800 1.95 MB

But when I load my project with the Safari simulator/ when I export the project I get this view

50
Screenshot 2019-08-27 at 11.42.50.png2880×1800 1.45 MB

Don’t know if this helps but any ideas would be appreciated… Need this to apply for jobs in future

7

You can send it to yourself and add the download link here. Also isn’t the problem on your site and not in the preview. Meaning why not just share a link to an export?

8

Heres the download link to the hype project https://wetransfer.com/downloads/dc8bd98aab7d663b6176c3dacaf28dcf20190827110214/03bbc3932556d11113cee9bb8b8987ee20190827110214/3daf24 The Safari preview shows the same issue as when I export the project and launch the HTML5 document in my finder. So I thought it would be easier to send over the document as the issue is present before the export, but not present in the Chrome preview.

9

The download is one GB big? Seriously? :crazy_face: Could it be that thats the problem to start with? Please make a copy and only share the defective part.

10

I downloaded that genormous file :card_file_box::file_cabinet:. Here are some notes :spiral_notepad::

  • Hype has a (know) bug in it’s layout engine. It doesn’t position scaled objects correct (it scales from the origin of the original size is my hunch). For images just use the proportional scale of the frame rather then the scale property set that back to 100%/100%. The image will then be scaled and positioned correctly.
  • Put your movies on Vimeo (Pro) or Youtube and then embed them rather then directly linking them in your document. They are not optimized for mobil bandwidth (transcoding etc.).

Hope that helps.

11

Yeah sorry about the size of the file :joy: I’ve got so many video’s in it… Kinda got carried away. Ah okay that makes sense. I’ll give that a go and see what happens, thanks for your help!

12

FYI, this is what I see when I simply do a simulator preview for a 10.5" iPad running iOS 12.4:

29%20PM
Screen Shot 2019-08-27 at 2.59.29 PM.png2220×1684 911 KB

It isn’t clear from the shots which layout you are using, but in general it looks like you probably may need to reconsider some of the flexible layout settings. Sometimes the easiest is to put items in a expanding group using “zoom contents” and set to shrink to fit!

13

I think this is the case he is talking about. People using scaleX and scaleY through the inspector and throwing the layout engine off:

ScaledBugReport.hype.zip (22,4 KB)

1 Like