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?
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.
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”.
@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.
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.
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:
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
+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
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)