Potrait to Landscape Rotate(-90deg)

[Brongo]

Hello Atomi Team
In the attachment, I designed this project as a portrait and added this javascript code to make it appear Landscape

document.body.style.setProperty(“-webkit-transform”, “rotate(-90deg)”, null);

But it does not appear as a full page in the webbrowser. Can you edit the attached project to help solve this?

Potre-to Landscape.approj (2.0 MB)

Thanks.

[Hang (Hang Nguyen)]

Hello,

I think it might be easier to design the project in landscape mode from the beginning, rather than relying on code to adjust it later.
Feel free to check out the project below for more details!
Potre-to Landscape_960x540.approj (2.0 MB)

Regards,

[Hang (Hang Nguyen)]

Thanks for your response!
Just to clarify, are you looking to lock the content orientation so that it follows the screen direction, like in this example?

Landscape Mode Lock

Is there a way to overcome the scaling issue that occurs when forcing landscape mode using a media query? At the moment, this happens when you rotate a full screen - centred project. [landscape] The CSS is: @media (orientation: landscape) { body { transform: rotate(0deg); } } @media (orientation: portrait) { body { transform: rotate(90deg); } There is a preview here: https://saola.interaktiv.co.uk/landscape/

Let me know so I can better understand and help you out!

[Hang (Hang Nguyen)]

From the link you provided, we see that the content appears in landscape orientation on both landscape and portrait screens. Could you please clarify what you’re trying to achieve so we can better assist you?

Regards,

[Hang (Hang Nguyen)]

Hi, there are two points here:

1. First, it’s about the orientation. If you want it to look like the screenshot you just shared, then it’s the same as the Saola example above. Could you please confirm that? Once we’re sure, we can explore how to achieve that in ActivePresenter.

2. Second, the content has its own aspect ratio. If it doesn’t match the screen’s aspect ratio, there will be some empty space either on the sides or at the top and bottom.

[Brongo]

Hello
i think you are right, let’s make the project like the Saola example in the example you mentioned. This should be a step in the right direction, let’s verify this in the activepresenter
Thanks

[Brongo]

I would be happy if you could help me, I tried to do as in the example you said but it didn’t work.
Thanks

[Hang (Hang Nguyen)]

Hi!

I’ve attached the project file for your reference. You’ll find the JavaScript code in the On Load event under ActivePresenter > Project > Properties > Interactivity tab.
Potre-to Landscape (3).approj (2.0 MB)

Regards,