Responsive layout question shrink to fit

Animation
1

I have a .hype project that is 900x635 in pixels. I have the file as responsive so it becomes larger and smaller when the user drags the browser window. But I need this to ONLY become SMALLER not bigger so in other words the size will never be able to go OVER 900 x 635 only SMALLER follow?

R

2

You need another layout for small devices ( iphone portrait), at 320px; maybe another layout at 768px ( ipad portrait) is needed to show the desktop navigation also in this device.

3

Understood but adding those layouts still do not prevent the browser from getting bigger than 900x635 . This is what I want to avoid

I need 900 x 635 as the MAX size then smaller intervals using the same ratio

450 x 317.50

225 x 158.75

follow?

I was looking at this and it behaves the way I want except the sizes need to be edited

1 Like
4

you may check also this template

you can also use only two layouts with a small trick in max-length in CCS

5

None of these do the trick they both open past 900x 635

This link is exactly what I need but it has no page source any help here?

http://art209.net/playground/seattle/

R

6

The max-width and max-height CSS properties are generally the easiest solution. You can add them to the head HTML:

	<style>
	
	#index_hype_container {
		max-width: 900px;
		max-height: 635px;
	}
	
	</style>

Note that this is targeting the main container div. The name of this will change based on your export, so you may need to rename it to something else. Hype’s preview always uses “index”.

1 Like
7

+1, simple soluiton

@ralphiedee2016 I've posted some links before your URL, it's hard to understand the question without an example; the CSS trick for the max-length works well, do some tests.

8

This works fine in preview but when I upload to my hosting it does not work

http://dagwaremedia.com/ResponsiveTest/ResponsiveTest.html

9

Hmm, becoming a bit more tricky.

To make this easier let me explain;

In my original document I have a folder which has all the elements in every scene on all my pages.

Folder is called TabletWrapper

In the scene settings I have both scales checked at 100%
Apply changes to all scenes checked.

the stage is 900 x 635

When this is previewed in a browser or uploaded to a hosted site

the scaling works fine EXCEPT

If I make the browser bigger than 900 x 635 the document expands but I DO NOT WANT THIS.

I only want the page to have a max size of 900 x 635 but to scale smaller ONLY.

So I now created a new document same page size (with no css in the head)
added an image 900 x 635 NO container
checked both scales
previewed and now
the scaling works and stops at 900 x 635 BUT does not scale smaller than 900 x 635

SO

I created a folder by selecting Group and placed the image INSIDE the folder
saved previewed and NOTHING WORKS.

So now I add

<style> #index_hype_container { max-width: 900px; max-height: 635px; } </style>

in the head .

Does not work

so now I change the name of the folder / container in the doc from Group to
#index_hype_container

then
_hype_container

None of this works

Can someone help me from here?

R

10

Your example does not work because the Hype document, and thus the main container element, is named differently in your document. In viewing the source, I see:

<style>
	
	#index_hype_container {
		max-width: 900px;
		max-height: 635px;
	}
	
	</style>	
	

	<!-- end copy -->
  </head>
  <body>
	<!-- copy these lines to your document: -->

	<div id="responsivetest_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="ResponsiveTest.hyperesources/responsivetest_hype_generated_script.js?23882"></script>
	</div>

	<!-- end copy -->

Notice the div id is “responsivetest_hype_container”. This needs to match with the CSS selector. So you’d need it to look like:

<style>
	
	#responsivetest_hype_container {
		max-width: 900px;
		max-height: 635px;
	}
	
</style>

Alternatively you could use both selectors, one for the Hype preview and one for the export name:

<style>
	
	#responsivetest_hype_container, #index_hype_container {
		max-width: 900px;
		max-height: 635px;
	}
	
</style>

Does that work for you?

1 Like
11

Hmm I did rename later but let me try your code. be right back

12

Worked like a charm, so reason for not working is I did not name the exported container the name of the project

Got It

Thx so much as you guys totally rock!!!!!!

2 Likes
13

This is a perfect example of how developers doing ‘real world’ jobs are trying to use hype but there is still a bit of a mismatch between the practical requirements and good theoretical understanding of the software. Hype is becoming more useful as a production tool but needs to streamline the practical solutions in some better way

14

+1
Hype can make responsive layouts and yo ucan create a stunning sites!! This is the most creative tool for HTML, however the software is made for animation and not specifically for the web development; So, some basic skills in HTML/CSS are required for professional works

1 Like
15

If we could control all the means of production and display, what you'd be embedding would look more and more like a black box SWF :stuck_out_tongue:

16

For what its worth, I have wanted to make it easier to get at the main container and scene elements. (If you’re working in JavaScript we did add the hypeDocument.documentId() API a bit ago)

1 Like