My hype document is not centered on the screen in wordpress


(Jerome) #1

Hi,

I am quite new to Hype and found it very easy to make animations etc.
The only issue I have, is to show it correctly on my site.

I have inserted the div code linking to the uploaded hype document in my wp-content folder and it is displayed,
but it is not centered on the site. It looks like something is pushing it from the left side of the screen.

It would be amazing if some of you knew the answer to this question!

(I also have an issue with my symbol-buttons, which appear out of place, but first things first)

the animation is on this site www.weinhonig.com/test03-02


(Jerome) #2

This post was flagged by the community and is temporarily hidden.


#3

Can you clarify how you would like it to look? The Hype div follows the convention of browsers: when there’s not enough space to display everything, the user will need to scroll down or to the right to see more.

There’s a way to either have your document shrink to fit the available size, or to have it always stay centered (and equally cut off either side) – which would you prefer?


(Jerome) #4

Thanks for the fast response :slight_smile:

I would like to have the div in full screen - but somehow it won’t display in full screen.
When I said, that its not centered, I meant that there is some kind of a border in the left and right side, that blocks the element from showing in full screen


#5

@samueljerome

Your project has the dimensions (760px x 380px) Therefore on a screen such as a laptop or larger it will only stretch to 760px, this is why it is entered in the screen with a “border” either side.

Increase the dimensions of your project or make it responsive to fill the screen using the Flexible Options in Hype.


(Jerome) #6

As you said, i tried redefining the dimensions of the project to 2000px x 400px, so it definitely would fit my whole screen, but there is still a border of approximately 100px on the left side of the screen.

Therefore the animation is pushed out of center.

I also tried to apply the flexible options, but as soon as I set the scale to (width: 100% height: 100%) the animation disappeared totally.