How to maintain a Non-Responsive website's aspect ratio of 16:9?

Firstly, I am NOT a website developer. I am making a websites using Adobe Muse (discontinued) to help a friend who can’t afford to pay a professional. I made one website before this 3 years back on Muse. So, I am not at all “literate” when it comes to codes.

So, I have managed to create a Non-responsive scroll-based website on Adobe Muse. I made a few breakpoints for different screen widths. The problem is that the website of 16:9 ratio doesn’t fit on Mobile phones like iPhone X which have long screens. My website design in strictly landscape. So, I have forced the landscape Orientation too. But the problem is that the bottom of the website crops away on mobile phones.

I can’t make my website responsive because visually, I am using 16:9 images that scroll one after another and the content appears over the images.

I came across this: https://jsfiddle.net/n27x7y3k/

Please check the complete code by visiting the link. I want something like this to happen to my website. My page length is longer than the width because it uses 6 images of 16:9 resolution as they scroll up one after another. So, the audience would view only one image at a time of 16:9 resolution.

I am sorry for a long question. But I thought I should explain as much as possible. Please help me out as I am stuck on this for the past 2 months.

Thanks

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.