Background color and size question

Amateur question here… how do I remove the background so its only the size of my scene (iphone xr in this case)?

As you can see, the orange background appears on all scenes.

Thanks in advance.

edit: I uploaded the example hype file itself







Test.zip (23.8 KB)

Hypes transparent setting in the documents-panel will also remove the background-colors for the scenes. so all or none … @jonathan this may be worth a feature request.

in the meantime one possible solution would be to paste this to the head:

<style>
body{
background-color: transparent !important;
}
</style>
3 Likes

Another way would be to leave background colour transparent, but, add a rectangle of the size of the scene and change its colour on every scene.

2 Likes

Awesome – thank you both! Is there a way within Hype to lock the orientation to portrait without having to lock on iphone?

There’s no way to do a rotation lock in Mobile Safari. If you are embedding the page within a native app you could do this.

Theoretically you can “fake it” with code if you wanted; basically you would need to look at the screen.orientation property and listen to the orientationchange event. When you detect it is the way you don’t want presented, you could rotate a container div for the Hype document. If you are using flexible layout, afterwards you would probably need to call the HYPE.documents['yourDoc'].relayoutIfNecessary() API.

2 Likes

Thanks @jonathan :+1:, (bookmarked!) this is good to know as I advance in my skillset. Although it sounds simple enough it may likely be a bit beyond my very humble level of knowledge at this time :rofl: For now I may have to just add the landscape layout.

2 Likes

If adding a landscape layout is too much of a work, you could just add text on landscape layout saying please turn to portrait. I won’t recommend it, but, if your app needs to be on portrait itself, this might be a workaround.

3 Likes

@Hrishikesh I didn’t think of this – thank you!

2 Likes