Scale Proportionalty (Responsive WordPress Website)


(Kelvin) #1

Hello,

I have a responsive wordpress blog. I’m looking to embed a Hype animation in a blog post at 1170x500pixels.

Since my blog is responsive I would like the Hype animation to scale proportionatley with everything else on the blog.

I’ve tried using an iframe but at a fixed width this breaks the layout.
I’ve also tried using percentages for the width but I still get the same issue.

Please let me know what I need to do to achive the desired result.

What is the best practice?

Thanks
Kelvin


#2

Please check out this document: responsive.zip (1.6 MB)

Three difference layouts satisfy three screen breakpoints:
320 to 400px
400 to 1200px
and finally, 1200 and up.

I also set Flexible Layout properties on the scene by checking the width / scale box in the document inspector:

And on some elements I set width scaling so they reach the edges of the document:

There many ways to do this, but the one thing that will likely not work well without some additional work is scaling on the height dimension.

If your document scales up and down for mobile devices and desktop screens with the same layout, your text will likely not look right in the size you don’t design for --it will either be far too large or far too small.

It would be great to know what you’re building and what type of content you are working with if this solution doesn’t work well for you. I’m currently working on a video tutorial for this and I would like to find a way to create a tutorial that helps most people working on most types of documents if I can.


(Kelvin) #3

Thanks for the quick response. I’m not at my desktop right now so I didn’t get a chance to see the project you attached.

I still had another question. The text that I plan to use will be image text. Technically speaking will that scale proportionatley as well?

Thanks


#4

I have a funny feeling you are working on a comic book :slight_smile:

Let’s say you have a 4 x 4 grid of a comic and each of the sections are images. In your mobile layout you would have a 2 x 2 grid which would allow the images to appear the correct size on smaller devices. Instead of seeing all of the content once, they would scroll to see the entire 16 frame panel. To answer your question, you could have the image scale up or down, but the real case you want to prepare for is mobile --> desktop. ‘Scaling’ is a nice thing to do between layouts, but not a solution for every screen size.


(Kelvin) #5

So I did a test that can be seen here (you can click the left or right hand side of the document to start a simple animation):

http://blacksuncomics.com/wp/wp-content/uploads/2016/06/responsive.html

The responsive layout works when you shrink the browser window. Can you let me know how to hide the image of the woman when it moves outside of the width and height of the document?


(Jonathan Deutsch) #6

Typically what you would do is put it inside a group, and set that group’s Content Overflow setting (in the Metrics Inspector) to be Hidden.


(Kelvin) #7

Awesome. Thanks for the info. I’m going to try that.