Centering The Hype Design


(Ken Judge) #1

Evening All,

Just wondering how you ensure the workspace you have created your Hype3 design on is always centred in the browser to accommodate peoples varied resolutions ?

Kind Regards

JudgeyK


#2

When your browser window becomes narrower than your Tumult Hype document, it’s true that your animation will maintain positioned flush with the left edge and the right border of the browser will cover it. To get your document to shift left when the window becomes narrower, check out the example below:

This is a screenshot of the code in place on this webpage: http://www.juliesbrother.com/

The Hype document on this page remains centered because of the .absolute class. You’ll notice that these properties are set on the element:

.absolute{
left:50%;
margin-left:-470px;
position:absolute;
}

The ‘470’ dimension is half of the width of the Tumult Hype document, which might not work if you have responsive layouts setup on your document.

So, once you have your Tumult Hype document in place, you’ll need to add a class=“absolute” property to the Hype Div, and then include the .absolute class in the … of your document.

So that’s one way – with Responsive Layouts you can have more complete control over how your document appears in different resolutions.


(Ken Judge) #3

Excellent,

Cheers Daniel.