Scalling components for different screen dimensions

[Hawk]

For component position, I use className in customized CSS file and set the margin to "auto", so the position will be same regardless the screen dimension.

Ex:

.CenteredImage{
margin-left: auto !important;
margin-right: auto !important;
margin-top: auto !important;
margin-bottom: auto !important;
}

However, there are two issues here. Some compoenets do not have the option "Class Name" in the properties panel (e.g. checkBox, customized component). How can I set there position to "auto" in the customized CSS

The second issue, how to make the compoenent SIZE scale as well. That means, how to make it getting bigger with bigger screen dimension and smaller with smaller screen dimensions. I beleive the I should make the size relative (using %). How can I achieve that in customized CSS?

Thank you for your help!

[Yurii Orishchuk]

Hi Hawk,

Q1:
You can use CSS selectors you need.

There is lot of available variants to use it.

Please take a look here http://www.w3.org/TR/CSS2/selector.html

So you can add classname for parent component and then narrow in CSS selector to get influence to the element/elements you need.

Q2:
There is several practices to make one element stretch to the parent one.

For example: you can use "width" and "height" styles for this goal:

pre

.someClass{
width: 90%;
height: 90%;
}

/pre

Note: you can use only "width" style or only "height" as well as them both.

Regards.