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

Jump to solution
finnegc
Community Novice

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

Labels (1)
1 Solution
awilliams
Instructure Alumni
Instructure Alumni

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.
(view in My Videos)

View solution in original post