Adaptive Size

[LINK3D]

Hello,

I'm trying to make my container adaptive to my screen size.
I was trying to use Player Width <=, but no idea how to continue.

Any help is appreciated.

[Hopki]

Hi,
Why not use size 100% in X and Y.
It will always fill the screen.
I guess you want to do more than just fill the screen with a container.

Probably best to describe what someone should see in the output.
Regards,

[LINK3D]

My container should not completely fill the screen, I want it like a pop up with a margin in every direction.

[Hopki]

Hi,
You can set a fixed pixel margin using CSS.
For example, to set a container to have a 100px margin from the edge of the window, you would add your container and set its position, X: 100px and Y: 100px
Set its size units to CSS and enter:

Width: calc(100% - 200px)
Heght: calc(100% - 200px

So how does this work?
You add the container 100px from the left, the setting, calc(100% - 200px), will make it 100% wide, but start from 100px, so it will have 100px overlap to the right.
But then it is minus 200px, so bringing the right back by 200px, so with the 100px overlap, this brings it in by 100px from the right.

When the same is done to the height, you end up with a 100px margin all the way around the container, but it will be responsive to the window size.
Regards,

[LINK3D]

Hey thank you for the reply,

This positions my container to the upper left of my browser window, and still does not scale it when I'm resizing my browser....

I attached my skin, maybe this explains more what I'm trying to do.

[Hopki]

Hi,
The container's anchor should be top left, and you have left out the spaces in this: calc(100% - 200px)
Note there are spaces between the % - 2.

However, the inner elements have fixed sizes, so they will not change size.
Also, your controller icons are not correctly spaced out, and icons overlap each other.

It may be better to use the external image loader as this will resize the image, keeping its aspect ratio.
Regards,