[ARCHIVED] enable content to size to a shrinking page...

[finnegc]

Not the easiest to explain...but how would one get the content on a page to shrink relative to the entire page?

Say you have a header with text and a video embedded.  When you "restore down" or otherwise shrink the page by grabbing a corner and pulling to make smaller, the header with text and the embedded video will be cut off, out of view.  Can this actual content also 'shrink' as you are pulling the page to go smaller?

Thanks!

Curt

[awilliams · Accepted solution]

After adding your image or embedded video you can change to the HTML editor and adjust width values to "100%" This will cause the images and iframes to scale with the size of the window. It can only scale them down so far though and at some point will cut off content. This is usually only a problem on mobile devices but most of those have pinch to zoom functionality to deal with such situations. Also videos have a fixed width and height and while some scaling may work, it is not perfect. Another thing to note is that in the mobile app iframe widths don't seem to be respected so embedded videos or other iframe content may not display properly.

Here is a screenshot of a page with a banner image and embedded YouTube video with widths adjusted to 100% and marked for easier detection:

And here is a video of the result:

This video is currently being processed. Please try again in a few minutes.

[awilliams]

Another way to do this with lots of content rather than just specific pieces is to use Home Sweet Homepages without Tables​.  @clong ​ did a wonderful job explaining how to use <div> tags to set up scaling content without using tables. I have used this information as the basis for our course home page templates. Thanks again Chris!

[Robbie_Grant]

 @finnegc ,

We are giving the Canvas Admins area a little bit of love (especially questions that are really, really old) and just want to check in with you.  This will also bring this question new attention. 

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

Robbie