Question to RV web designers

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I was looking at RV gallery and noticed that you have some presentations squeezed in there. How did you do that? I was searching the Internet for this matter, and all the solutions posted there did not work for me the way I wanted. What I want to do is to scale down existing full size presentation to fit smaller frame. If that is not a secret, would you share it with us how that can be done?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Hi Darius,

Just to clarify, are you trying to fit a Rise Vision presentation in a smaller frame? Or a picture of a Rise Vision presentation in a smaller frame? All the presentations in the gallery are GIF's or PNG/JPG. 

Thanks,
Shea
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
C'mon Shea, I am not a coder, but fitting a picture is easy :) I wanted to learn how to squeeze the actual working preview presentation into a smaller size frame.

For example, I have 3 different presentations and I wanted to make a webpage showing all of them together in some random environment. Of course all of them must fit withing single monitor size, which requires scaling presentations down to aprx. 400x225. So, how do I go from 1920x1080 to that size and still have that scaled-down mini version working?
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Ah I thought that's what you were asking. I haven't played around with this at all, but you can build your presentations with % rather than pixels. Which would make it somewhat responsive. Mat gave me this example http://preview.risevision.com/Viewer.html?type=presentation&id=b4556d87-e07a-494a-9db7-d942b9816... It's really basic but it would be able to fit in a 400x225 iframe. 

If you have any questions let me know.

Thanks
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Just to add to the above, to do this you have to go into the html and change all the px measurements to % for all the placeholders as well as the body which is the presentation dimensions. And here is the code for the presentation linked to above.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="help" href="http://wp.me/P1cnKK-14Y">
    <title></title>
	  <style media="screen" type="text/css">

		.MyGradientClass
			{
		height:100%;
  
		background: -webkit-linear-gradient(bottom, #2b5fab 0%,#ffffff 100%);
			  /*background-image: url("https://s3.amazonaws.com/riseclientcontent/mat/noisy-texture-100x100-o18-d15-c-f34379-t1.png");
			  background-repeat: repeat-x, repeat;*/

		}​
		  
		  

</style>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="help" href="http://wp.me/P1cnKK-14Y">
    <title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<style>
		
		@media screen and (max-width: 1023) { /* 1024x768 */
			/*body {
				background: url('http://c624838.r38.cf2.rackcdn.com/background1024x768.jpg') no-repeat left top !important;
		}*/#images {
				width: 44% !important;
				height: 25% !important;
				top: 20% !important;
				left: 28% !important;
			}
				#text {
				width: 90% !important;
				height: 25% !important;
				top: 45% !important;
				left: 5% !important;
			}
				#header {
				width: 100% !important;
				height: 10% !important;
				top: 5% !important;
				left: 0% !important;
			}
			
				#logo {
				width: 15% !important;
				height: 10% !important;
				top: 5% !important;
				left: 10% !important;
			}
			
				#tag {
				width: 65% !important;
				height: 10% !important;
				top: 5% !important;
				left: 35% !important;
			}
		}
		
		@media screen and (min-width: 1024) { /* 1024x768 */
			/*body {
				background: url('http://c624838.r38.cf2.rackcdn.com/background1024x768.jpg') no-repeat left top !important;
		}*/
				#images {
				width: 25% !important;
				height: 70% !important;
				top: 25% !important;
				left: 5% !important;
			}
				#text {
				width: 60% !important;
				height: 70% !important;
				top: 25% !important;
				left: 35% !important;
			}
				#header {
				width: 100% !important;
				height: 20% !important;
				top: 5% !important;
				left: 0% !important;
			}
			
				#logo {
				width: 15% !important;
				height: 20% !important;
				top: 5% !important;
				left: 10% !important;
			}
			
				#tag {
				width: 60% !important;
				height: 20% !important;
				top: 5% !important;
				left: 30% !important;
			}
		}
		
		@media screen and (min-width: 1080) { /* 1080x1920 Portrait */
			/*body {
				background: url('http://c624838.r38.cf2.rackcdn.com/background1024x768.jpg') no-repeat left top !important;
		}*/
				#images {
				width: 44% !important;
				height: 25% !important;
				top: 20% !important;
				left: 28% !important;
			}
				#text {
				width: 90% !important;
				height: 25% !important;
				top: 45% !important;
				left: 5% !important;
			}
				#header {
				width: 100% !important;
				height: 10% !important;
				top: 5% !important;
				left: 0% !important;
			}
			
				#logo {
				width: 20% !important;
				height: 10% !important;
				top: 5% !important;
				left: 10% !important;
			}
			
				#tag {
				width: 65% !important;
				height: 10% !important;
				top: 5% !important;
				left: 35% !important;
			}
		}
		
		
		@media screen and (min-width: 1280) { /* 1280x768 Landscape */
			/*body {
				background: url('http://c624838.r38.cf2.rackcdn.com/background1024x768.jpg') no-repeat left top !important;
		}*/
				#images {
				width: 25% !important;
				height: 70% !important;
				top: 25% !important;
				left: 5% !important;
			}
				#text {
				width: 60% !important;
				height: 70% !important;
				top: 25% !important;
				left: 35% !important;
			}
				#header {
				width: 100% !important;
				height: 20% !important;
				top: 5% !important;
				left: 0% !important;
			}
			
				#logo {
				width: 15% !important;
				height: 20% !important;
				top: 5% !important;
				left: 10% !important;
			}
			
				#tag {
				width: 60% !important;
				height: 20% !important;
				top: 5% !important;
				left: 30% !important;
			}
			
		
		
		
	</style>
	  
	  
	
  </head>

  <body style="height:100%;width:100%; margin: 0; overflow: hidden;background:;background-size:contain;" class="MyGradientClass" >
	  
	  <div  id="images" placeholder="true" style="width:90%;height:25%;left:5%;top:25%;z-index:1;position:absolute;"></div>
	<div  id="header" placeholder="true" style="width:100%;height:15%;left:0%;top:5%;z-index:0;position:absolute;background:;background-size:contain;"></div>
	<div  id="tag" placeholder="true" style="width:65%;height:15%;left:35%;top:5%;z-index:2;position:absolute;"></div>
	<div  id="logo" placeholder="true" style="width:20%;height:15%;left:10%;top:5%;z-index:3;position:absolute;"></div>
	<div  id="text" placeholder="true" style="width:90%;height:50%;left:5%;top:50%;z-index:4;position:absolute;background:;background-size:contain;"></div>
	</body>

  <script language='javascript'>
	<!--
	var presentationData = {
	"presentationData": {
		"id": "b4556d87-e07a-494a-9db7-d942b981620a",
		"hidePointer": false,
		"donePlaceholder": null,
		"placeholders": [
			{
				"id": "header",
				"type": "playlist",
				"timeDefined": false,
				"startDate": "03/12/13 3:33 PM",
				"endDate": null,
				"startTime": null,
				"endTime": null,
				"recurrenceType": "Daily",
				"recurrenceFrequency": "1",
				"recurrenceAbsolute": true,
				"recurrenceDayOfWeek": "0",
				"recurrenceDayOfMonth": "0",
				"recurrenceWeekOfMonth": "0",
				"recurrenceMonthOfYear": "0",
				"visibility": true,
				"transition": "none",
				"items": [
					{
						"name": "HTML Item",
						"duration": "10",
						"type": "HTML",
						"objectReference": null,
						"index": "0",
						"playUntilDone": false,
						"objectData": "<!-- <style type=\"text/css\">\n \n pre {\n \tmargin-left:auto;\n\tmargin-right:auto;\n \twidth: 90%; height: 95%; \n \tbackground: -webkit-linear-gradient(top, #ffffff 40%,#cccccc 100%);\n \t-webkit-box-shadow: 3px 5px 8px #555;\n \t-webkit-border-radius: 15px;\n \t\n }\n \n </style>\n <pre>\n </pre>\n\n-->",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": null,
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "1",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					}
				]
			},
			{
				"id": "images",
				"type": "playlist",
				"timeDefined": false,
				"startDate": "06/09/11 1:52 PM",
				"endDate": null,
				"startTime": null,
				"endTime": null,
				"recurrenceType": "Daily",
				"recurrenceFrequency": "1",
				"recurrenceAbsolute": true,
				"recurrenceDayOfWeek": "0",
				"recurrenceDayOfMonth": "0",
				"recurrenceWeekOfMonth": "0",
				"recurrenceMonthOfYear": "0",
				"visibility": true,
				"transition": "fade",
				"items": [
					{
						"name": "enterprise",
						"duration": "15",
						"type": "image",
						"objectReference": null,
						"index": "0",
						"playUntilDone": false,
						"objectData": "up_url=http%3A%2F%2Fcommondatastorage.googleapis.com%2Frisemedialibrary-cb9c50b7-193c-4ada-bd72-f25b2202777c%2Fenterprise-grade-480w.png&up_backgroundColor=&up_scaleToFit=true",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "03/19/13 5:20 PM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "0",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "nothing but the web",
						"duration": "15",
						"type": "image",
						"objectReference": null,
						"index": "1",
						"playUntilDone": false,
						"objectData": "up_url=http%3A%2F%2Fcommondatastorage.googleapis.com%2Frisemedialibrary-cb9c50b7-193c-4ada-bd72-f25b2202777c%2Fhtml-480w.png&up_backgroundColor=&up_scaleToFit=true",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "03/19/13 5:20 PM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "0",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "embrace",
						"duration": "15",
						"type": "image",
						"objectReference": null,
						"index": "2",
						"playUntilDone": false,
						"objectData": "up_url=http%3A%2F%2Fcommondatastorage.googleapis.com%2Frisemedialibrary-cb9c50b7-193c-4ada-bd72-f25b2202777c%2Fembrace-the-web-480w.png&up_backgroundColor=&up_scaleToFit=true",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "03/19/13 5:19 PM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "0",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "your network",
						"duration": "15",
						"type": "image",
						"objectReference": null,
						"index": "3",
						"playUntilDone": false,
						"objectData": "up_url=http%3A%2F%2Fcommondatastorage.googleapis.com%2Frisemedialibrary-cb9c50b7-193c-4ada-bd72-f25b2202777c%2Fnetwork-480w.png&up_backgroundColor=&up_scaleToFit=true",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "04/09/13 1:43 PM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "0",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "pick, preview",
						"duration": "15",
						"type": "image",
						"objectReference": null,
						"index": "4",
						"playUntilDone": false,
						"objectData": "up_url=http%3A%2F%2Fcommondatastorage.googleapis.com%2Frisemedialibrary-cb9c50b7-193c-4ada-bd72-f25b2202777c%2Fpick-preview-use-share-480w.gif&up_backgroundColor=&up_scaleToFit=true",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "03/19/13 5:19 PM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "0",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "1 plus 1",
						"duration": "15",
						"type": "image",
						"objectReference": null,
						"index": "5",
						"playUntilDone": false,
						"objectData": "up_url=http%3A%2F%2Fcommondatastorage.googleapis.com%2Frisemedialibrary-cb9c50b7-193c-4ada-bd72-f25b2202777c%2F1plus1-480w.png&up_backgroundColor=&up_scaleToFit=true",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "03/19/13 5:20 PM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "0",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "not alone",
						"duration": "15",
						"type": "image",
						"objectReference": null,
						"index": "6",
						"playUntilDone": false,
						"objectData": "up_url=http%3A%2F%2Fcommondatastorage.googleapis.com%2Frisemedialibrary-cb9c50b7-193c-4ada-bd72-f25b2202777c%2Fnot-alone-480w.png&up_backgroundColor=&up_scaleToFit=true",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "03/19/13 5:17 PM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "0",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					}
				]
			},
			{
				"id": "tag",
				"type": "playlist",
				"timeDefined": false,
				"startDate": "03/19/13 2:40 PM",
				"endDate": null,
				"startTime": null,
				"endTime": null,
				"recurrenceType": "Daily",
				"recurrenceFrequency": "1",
				"recurrenceAbsolute": true,
				"recurrenceDayOfWeek": "0",
				"recurrenceDayOfMonth": "0",
				"recurrenceWeekOfMonth": "0",
				"recurrenceMonthOfYear": "0",
				"visibility": true,
				"transition": "none",
				"items": [
					{
						"name": "HTML Item",
						"duration": "10",
						"type": "HTML",
						"objectReference": null,
						"index": "0",
						"playUntilDone": false,
						"objectData": "<style>\t\n\t.block {\n  text-align: left;\n}\n \n.block:before {\n  content: '';\n  display: inline-block;\n  height: 100%; \n  vertical-align: middle;\n }\n \n.centered {\n  display: inline-block;\n  vertical-align: middle;\n  width: 80%;\n\tfont-size: 22px;\n\tmax-height:400px;\n\t\tfont-family: Arial;\n\t\tcolor: #333333;\n }\n\t</style>\n\n<div class=\"block\" style=\"height: 100%;\">\n    \n    <div class=\"centered\">\n        <p>The Enterprise Digital Signage Platform that's <span style=\"color: #2b5fab;\"><b>FREE.</b></span> No Really. <span style=\"color: #2b5fab;\"><b>FREE!</b></span></p>\n    </div>\n",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "03/19/13 3:07 PM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "1",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					}
				]
			},
			{
				"id": "logo",
				"type": "playlist",
				"timeDefined": false,
				"startDate": "03/19/13 3:37 PM",
				"endDate": null,
				"startTime": null,
				"endTime": null,
				"recurrenceType": "Daily",
				"recurrenceFrequency": "1",
				"recurrenceAbsolute": true,
				"recurrenceDayOfWeek": "0",
				"recurrenceDayOfMonth": "0",
				"recurrenceWeekOfMonth": "0",
				"recurrenceMonthOfYear": "0",
				"visibility": true,
				"transition": "none",
				"items": [
					{
						"name": "Image Item",
						"duration": "10",
						"type": "image",
						"objectReference": null,
						"index": "0",
						"playUntilDone": false,
						"objectData": "up_url=http%3A%2F%2Fcommondatastorage.googleapis.com%2Frisemedialibrary-cb9c50b7-193c-4ada-bd72-f25b2202777c%2Frise-logo.png&up_backgroundColor=&up_scaleToFit=true",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": null,
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "1",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					}
				]
			},
			{
				"id": "text",
				"type": "playlist",
				"timeDefined": false,
				"startDate": "04/09/13 9:45 AM",
				"endDate": null,
				"startTime": null,
				"endTime": null,
				"recurrenceType": "Daily",
				"recurrenceFrequency": "1",
				"recurrenceAbsolute": true,
				"recurrenceDayOfWeek": "0",
				"recurrenceDayOfMonth": "0",
				"recurrenceWeekOfMonth": "0",
				"recurrenceMonthOfYear": "0",
				"visibility": true,
				"transition": "none",
				"items": [
					{
						"name": "Enterprise Grade",
						"duration": "15",
						"type": "HTML",
						"objectReference": null,
						"index": "0",
						"playUntilDone": false,
						"objectData": "<style>\t\n\t.block {\n  text-align: left;\n}\n \n.block:before {\n  content: '';\n  display: inline-block;\n  height: 100%; \n  vertical-align: middle;\n }\n \n.centered {\n  display: inline-block;\n  vertical-align: middle;\n\t\tfont-family: Arial;\n\t\tcolor: #333333;\n\t\twidth: 98%;\n\t\n }\n\t\n\t.text {\n    color: #333333;\n    font: 26px Arial, sans-serif;\n}\n\t\t\n.depth {\n    display: block;\n    padding: 0px;\n    color: black;\n    font: bold 56px Arial, sans-serif;\n    position: relative;\n}\n\t\n\t\n.depth:before, .depth:after {\n    content: attr(title);\n    padding: 0px;\n    color: rgba(255,255,255,.1);\n    position: absolute;\n}\n\n.depth:before { top: 1px; left: 1px }\n.depth:after  { top: 2px; left: 2px }\n\t</style>\n\n<div class=\"block\" style=\"height: 100%;\">\n    \n    <div class=\"centered\">\n\t\t        <div class=\"depth\" title=\"Enterprise Grade\">Enterprise Grade</div>\n\n        <div class=\"text\" >Enterprise-grade digital signage platforms need the scheduling, distribution, management and monitoring capabilities to handle dozens, hundreds or 1,000s of end-points, and weather the storms of usage spikes, power outages and hacker attacks. We’re there, both in what we’ve built and by sitting on the biggest, most robust cloud service on the planet - Google App Engine.</div>\n\t\t       \n\n    </div>",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "04/09/13 11:03 AM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "1",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "Nothing But the Web",
						"duration": "15",
						"type": "HTML",
						"objectReference": null,
						"index": "1",
						"playUntilDone": false,
						"objectData": "<style>\t\n\t.block {\n  text-align: left;\n}\n \n.block:before {\n  content: '';\n  display: inline-block;\n  height: 100%; \n  vertical-align: middle;\n }\n \n.centered {\n  display: inline-block;\n  vertical-align: middle;\n\t\tfont-family: Arial;\n\t\tcolor: #333333;\n\t\twidth: 98%;\n\t\n }\n\t\n\t.text {\n    color: #333333;\n    font: 26px Arial, sans-serif;\n}\n\t\t\n.depth {\n    display: block;\n    padding: 0px;\n    color: black;\n    font: bold 56px Arial, sans-serif;\n    position: relative;\n}\n\t\n\t\n.depth:before, .depth:after {\n    content: attr(title);\n    padding: 0px;\n    color: rgba(255,255,255,.1);\n    position: absolute;\n}\n\n.depth:before { top: 1px; left: 1px }\n.depth:after  { top: 2px; left: 2px }\n\t</style>\n\n<div class=\"block\" style=\"height: 100%;\">\n    \n    <div class=\"centered\">\n\t\t        <div class=\"depth\" title=\"Nothing But The Web\">Nothing But The Web</div>\n\n        <div class=\"text\" >We’re all web, all the time. No proprietary files or skills required. There’s no software to install, Rise Vision requires nothing more than a browser. Our content is HTML and all of our <b>digital signage Presentation Templates</b> have been released under open source licenses.</div>\n\t\t       \n\n    </div>",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "04/09/13 11:03 AM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "1",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "Embrace The Web",
						"duration": "15",
						"type": "HTML",
						"objectReference": null,
						"index": "2",
						"playUntilDone": false,
						"objectData": "<style>\t\n\t.block {\n  text-align: left;\n}\n \n.block:before {\n  content: '';\n  display: inline-block;\n  height: 100%; \n  vertical-align: middle;\n }\n \n.centered {\n  display: inline-block;\n  vertical-align: middle;\n\t\tfont-family: Arial;\n\t\tcolor: #333333;\n\t\twidth: 98%;\n\t\n }\n\t\n\t.text {\n    color: #333333;\n    font: 24px Arial, sans-serif;\n}\n\t\t\n.depth {\n    display: block;\n    padding: 0px;\n    color: black;\n    font: bold 56px Arial, sans-serif;\n    position: relative;\n}\n\t\n\t\n.depth:before, .depth:after {\n    content: attr(title);\n    padding: 0px;\n    color: rgba(255,255,255,.1);\n    position: absolute;\n}\n\n.depth:before { top: 1px; left: 1px }\n.depth:after  { top: 2px; left: 2px }\n\t</style>\n\n<div class=\"block\" style=\"height: 100%;\">\n    \n    <div class=\"centered\">\n\t\t        <div class=\"depth\" title=\"Embrace The Web\">Embrace The Web</div>\n\n        <div class=\"text\" >If it can run in a browser, it can run on our platform. Need more content? Use our <b>Gadgets</b> to incorporate spreadsheets, interactivity, wayfinding, events, directories, FourSquare, Twitter, RSS, financial, sports, news, mapping, weather, YouTube, Vimeo, photos ... and the list goes on. <br/><br/>Our digital signage platform is no walled garden. Bring your large format, interactive, web and mobile displays together to efficiently deliver your message to your audience, wherever they may be.</div>\n\t\t       \n\n    </div>",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "04/09/13 11:03 AM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "1",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "Your Network",
						"duration": "15",
						"type": "HTML",
						"objectReference": null,
						"index": "3",
						"playUntilDone": false,
						"objectData": "<style>\t\n\t.block {\n  text-align: left;\n}\n \n.block:before {\n  content: '';\n  display: inline-block;\n  height: 100%; \n  vertical-align: middle;\n }\n \n.centered {\n  display: inline-block;\n  vertical-align: middle;\n\t\tfont-family: Arial;\n\t\tcolor: #333333;\n\t\twidth: 98%;\n\t\n }\n\t\n\t.text {\n    color: #333333;\n    font: 26px Arial, sans-serif;\n}\n\t\t\n.depth {\n    display: block;\n    padding: 0px;\n    color: black;\n    font: bold 56px Arial, sans-serif;\n    position: relative;\n}\n\t\n\t\n.depth:before, .depth:after {\n    content: attr(title);\n    padding: 0px;\n    color: rgba(255,255,255,.1);\n    position: absolute;\n}\n\n.depth:before { top: 1px; left: 1px }\n.depth:after  { top: 2px; left: 2px }\n\t</style>\n\n<div class=\"block\" style=\"height: 100%;\">\n    \n    <div class=\"centered\">\n\t\t        <div class=\"depth\" title=\"Your Network\">Your Network</div>\n\n        <div class=\"text\" >Add one display, or thousands, there are no limitations. <b>Create your own branded digital signage service</b> and add as many clients and their displays as you need. <br/><br/>From one browser login you can operate a network, or a network of networks, from anywhere, anytime. You can do it all, or delegate and distribute responsibility with the confidence that your login manages and monitors your entire digital signage network. It's that simple.</div>\n\t\t       \n\n    </div>",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "04/09/13 11:03 AM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "1",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "Pick, Preview, Use and Share",
						"duration": "15",
						"type": "HTML",
						"objectReference": null,
						"index": "4",
						"playUntilDone": false,
						"objectData": "<style>\t\n\t.block {\n  text-align: left;\n}\n \n.block:before {\n  content: '';\n  display: inline-block;\n  height: 100%; \n  vertical-align: middle;\n }\n \n.centered {\n  display: inline-block;\n  vertical-align: middle;\n\t\tfont-family: Arial;\n\t\tcolor: #333333;\n\t\twidth: 98%;\n\t\n }\n\t\n\t.text {\n    color: #333333;\n    font: 24px Arial, sans-serif;\n\tletter-spacing: -0.05em;\n\n}\n\t\t\n.depth {\n    display: block;\n    padding: 0px;\n    color: black;\n    font: bold 50px Arial, sans-serif;\n    position: relative;\n\tletter-spacing: -0.04em;\n\n}\n\t\n\t\n.depth:before, .depth:after {\n    content: attr(title);\n    padding: 0px;\n    color: rgba(255,255,255,.1);\n    position: absolute;\n\tletter-spacing: -0.04em;\n}\n\n.depth:before { top: 1px; left: 1px }\n.depth:after  { top: 2px; left: 2px }\n\t</style>\n\n<div class=\"block\" style=\"height: 100%;\">\n    \n    <div class=\"centered\">\n\t\t        <div class=\"depth\" title=\"Pick, Preview, Use and Share\">Pick, Preview, Use and Share</div>\n\n        <div class=\"text\" >Pick a free Presentation from our library, preview it right in your browser and if you like what you see, add your brand and content to make it your own. Then share it easily with coworkers, peers and customers. All that’s needed is a browser.\n\t\t\t<br/><br/>And the best part! Our content is HTML. No proprietary skills required. Your web designers can repurpose your existing web assets, customize your Presentations or extend them in in anyway they please. All using the universal language of the web.</div>\n\t\t       \n\n    </div>",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "04/09/13 11:03 AM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "1",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "1+1",
						"duration": "15",
						"type": "HTML",
						"objectReference": null,
						"index": "5",
						"playUntilDone": false,
						"objectData": "<style>\t\n\t.block {\n  text-align: left;\n}\n \n.block:before {\n  content: '';\n  display: inline-block;\n  height: 100%; \n  vertical-align: middle;\n }\n \n.centered {\n  display: inline-block;\n  vertical-align: middle;\n\t\tfont-family: Arial;\n\t\tcolor: #333333;\n\t\twidth: 98%;\n\t\n }\n\t\n\t.text {\n    color: #333333;\n    font: 28px Arial, sans-serif;\n}\n\t\t\n.depth {\n    display: block;\n    padding: 0px;\n    color: black;\n    font: bold 56px Arial, sans-serif;\n    position: relative;\n}\n\t\n\t\n.depth:before, .depth:after {\n    content: attr(title);\n    padding: 0px;\n    color: rgba(255,255,255,.1);\n    position: absolute;\n}\n\n.depth:before { top: 1px; left: 1px }\n.depth:after  { top: 2px; left: 2px }\n\t</style>\n\n<div class=\"block\" style=\"height: 100%;\">\n    \n    <div class=\"centered\">\n\t\t        <div class=\"depth\" title=\"1 + 1 does equal 3\">1 + 1 does equal 3</div>\n\n        <div class=\"text\" >Use our open source HTML content and applications, and our <b>public API’s</b> to extend the platform anyway you please. Whether it’s serving a niche or creating a custom application, we don’t stand in your way. Take the platform, customize, and create exactly what you want, when you want.</div>\n\t\t       \n\n    </div>",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "04/09/13 11:03 AM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "1",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					},
					{
						"name": "You're Not On Your Own",
						"duration": "15",
						"type": "HTML",
						"objectReference": null,
						"index": "6",
						"playUntilDone": false,
						"objectData": "<style>\t\n\t.block {\n  text-align: left;\n}\n \n.block:before {\n  content: '';\n  display: inline-block;\n  height: 100%; \n  vertical-align: middle;\n }\n \n.centered {\n  display: inline-block;\n  vertical-align: middle;\n\t\tfont-family: Arial;\n\t\tcolor: #333333;\n\t\twidth: 98%;\n\t\n }\n\t\n\t.text {\n    color: #333333;\n    font: 28px Arial, sans-serif;\n}\n\t\t\n.depth {\n    display: block;\n    padding: 0px;\n    color: black;\n    font: bold 56px Arial, sans-serif;\n    position: relative;\n}\n\t\n\t\n.depth:before, .depth:after {\n    content: attr(title);\n    padding: 0px;\n    color: rgba(255,255,255,.1);\n    position: absolute;\n}\n\n.depth:before { top: 1px; left: 1px }\n.depth:after  { top: 2px; left: 2px }\n\t</style>\n\n<div class=\"block\" style=\"height: 100%;\">\n    \n    <div class=\"centered\">\n\t\t        <div class=\"depth\" title=\"You’re Not On Your Own\">You’re Not On Your Own</div>\n\n        <div class=\"text\" >Join our tremendous online <b>Support Community</b> to get help and share ideas, or if you need the services of an expert check out our <b>Partners</b> to find the help you need to deliver your digital signage applications. You don’t have to do this on your own.</div>\n\t\t       \n\n    </div>",
						"additionalParams": null,
						"timeDefined": false,
						"startDate": "04/09/13 11:03 AM",
						"endDate": null,
						"startTime": null,
						"endTime": null,
						"recurrenceType": "Daily",
						"recurrenceFrequency": "1",
						"recurrenceAbsolute": true,
						"recurrenceDayOfWeek": "0",
						"recurrenceDayOfMonth": "1",
						"recurrenceWeekOfMonth": "0",
						"recurrenceMonthOfYear": "0"
					}
				]
			}
		]
	}
};
	//-->
	</script>
</html>
 
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Thank you Shea, but % instead of px is not what I need in this case. I see what you guys are saying, but it would become a major problem here. Or I simply do not know how to scale down the text to preserve the same layout appearance. Also, in my case, frames cannot get smaller or larger than 400x225, they must stay fixed. I need to do the same as you did here with working presentations: https://www.risevision.com/gallery

I may be totally wrong, but to my understanding those were not made fluid in any way. Those are fixed size presentations that you somehow managed to squeeze into the smaller frames.
(Edited)
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
If you ever find a need to scale text but want to preserve the line endings and layout you can use viewport width and heights: https://css-tricks.com/viewport-sized-typography/ Most designers dont use it or know about it because it only works in chrome (probably firefox and safari by now), but lucky for you and me thats not an issue...
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
In the gallery it's just screenshots of presentations that I scaled down to fit the frame. I'm not sure how it could be achieved with a fully working presentation. 
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Yeah I recorded GIF's of the presentations to give as much of the experience as possible. I use LICEcap to record the GIFs http://www.cockos.com/licecap/
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Thank you Shea, that was Eureka! moment to me :) I have never thought about GIF prior this conversation.
(Edited)
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Yeah the GIF's work great, they give a great illusion of a functioning presentation, I was thinking of doing videos, but on a page like the gallery the files would be to big I think.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
No necessarily. I have made this presentation playing scaled up animated GIF in the background. It worked fine until I noticed it freezing. The presentation worked, but animation stayed frozen. The only solution was to restart something. So, I made WebM video off the same animated GIF and placed in in my presentation. Now, not only that it is playing smoother and not crashing anymore, but also it is lighter by 50% than GIF was.
(Edited)
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Interesting, i'll have to look into that. Thanks for the idea
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
So, here is what worked for me... sort of "<iframe width="1024" height="768" src="http://www.bbc.com"; style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>"

This can scale my presentation just fine, but it is scaling it to the center of the original size, which leaves me with that darn iFrame floating in the middle of my screen. I have tried modifying it and forcing it to re-size to the top-left corner... no luck.
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Darius,

I believe Shea's gif solution may be the easiest way to accomplish what you're trying to do. Let us know if you have success otherwise!
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Sure, here it is... 80% finished https://storage.googleapis.com/riseme...
Photo of Byron

Byron, Keener

  • 9,658 Points 5k badge 2x thumb
Nice! Darius, you should throw these into our contest!
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
That looks awesome Darius