Hey everyone
I have a problem. How do I make a scene fill the screen no matter what resolution you have on your monitor? Using flexible layout “expand to fill” works fine on a single element but I need the entire scene to react including the picture.mouseover.hype.zip (163.1 KB)
I attached an example. This example fills 1920x1080 monitor. However if I look at it on a 4k monitor it still shows as 1920x1080
Yeah I checked that. I understand how you do it with a single element. But not multiple elements so the scene looks identical in full screen in any resolution.
Do it on your group container. No pins but enabling proportinal scale on both axis. Then activate zoom content and set it to expand to fill and your good to go.
Mate thank you so much! Removing the pins made the trick so now I understand how that works. However now it stretches too much. The scene goes outside the browser window.
You can’t fit a a square peg in a round hole. Meaning that if your proportions don’t fit your destination square you will either have to stretch (giving up the proportional lock) or choose shrink to fit or scale to fill … no way aroud it.
Thanks for the reply
Shrink to fit did the trick. It works fine here: www.rasmuslinden.se/viewport but if I use embedd code in wordpress the flexible layout won’t work. I use the following code
( <iframe width=“100%” height=“680px” src=“https://www.rasmuslinden.se/viewport/index.html”
style=“border:0px” scrolling=“no” content="user-scalable=yes, width=1920"seamless> )
Use vw and vh instead as a CSS unit.
The hype scene is 1920x1080px
What numbers should I use as vw and vh? Also MaxZieb, thank you so much for helping out mate!
Hi Rasmus!
Have a look at this page on the w3schools web site.
The vh & vw references are down the page a bit under the sub-heading “Relative Lengths”. Note that there is a “Try it” button on these lines that let’s You experiment with these CSS units.
Thanks Jim!
really very nice to have this thing