One thing I do see on the web is when a site has an image that fills the width of the screen, but when you make the page smaller manually instead of squeezing the image it makes the image slightly smaller and it shows less of the image on the page. I assume that is set up with the tools here, but not sure how at the moment?
Correct, this is the Flexible Layout system. You will need to enable the width and/or height scaling first in the scene inspector and then select an element for the options to be available. Please see:
Thanks Jonathan, might be easier if I upload it. I dont think I have done it correctly? Sometimes the text gets hidden, depending how the browser is sized. This is a fundamental issue that I need to understand I think before I carry on. Do you have time to take a look?
Thanks Jonathan. When I squeeze the width it gives a horizontal letterbox effect and the same when I squeeze the height, a vertical letterbox effect. Is it possible to keep the black background or image to fill all of the screen without the image distorting?
The thing to know is that zoom contents takes the visual contents of everything inside an element or a group and scales it like a bitmap (though in many cases the browser can re-render stuff like text to make it sharp).
Not all items need to be proportionate, so you can either:
move these outside the main group and then put your own flexible layout settings on them to scale as needed
Turn off zoom contents for the group, turn off the scaling behavior, and then set individual elements to scale and pin however you see fit (some elements like text may need zoom contents still turned on).
(You could also set the scene's background color to just be black in this case, but that might not hold up depending on future plans you want for a background .)