Size and Lock

Elements Relative to an Ad Container

Within the Fluid Designer, all elements are inside marquees that you can resize. Marquees are the border of an element’s container. The size of an element’s container is either set in % relative to an ad container, or in px. Additional option is to lock proportions of an element with constant width and flexible height or vice versa.

Size and lock properties located on the Top Bar within Element Properties.

For an Image and Video Player elements, you can also choose different options of display within the element’s container. Learn More: Elements - Display (Containing and Alignment).

Size

On default, element’s size is shown in percentage (%) relative to an ad container. That means an element will occupy a certain percent of an ad, however the ad resizes.

For example, 100% of 300px ad width is 300px of an element’s width and 100% of 1240px ad width is 1240px of an element’s width. Same applies to a height.

Another option for an element’s size is in pixels (px). That means the size of an element will stay absolute regardless of the size of an ad.
For example, 25px in width and 25px in height of an element will stay the same whether the width of an ad is 600px or 320px. It is a good option for video controls. You don’t want them to be smaller than 25px/25px, as well as too big, so for all mobile sizes, you’ll set the size in pixels and regardless of the mobile device width, controls will stay the same.

To switch from % to px, click the percent icon.

Locking Elements

You can also lock an element’s width or height in order to maintain its proportion. When height is locked, that means you can’t change it and it’ll adapt to save proportions of an element to maintain the set width (in the example below it’s 35%). This option is best suitable for HTML Buttons, Video players and in some cases Group elements.
Click on the “lock” icon to lock an element’s proportions. Note: if an image is set to Fill or Cover, it’ll automatically make an image Contain and will lock its original proportions.

Lock width instead of height

To lock width instead of height, click the “reverse” arrows to switch the lock from one parameter to the other. To switch back, click the “double arrows” again. Note: when locked, the size of an element can still use either % (element’s size relative to the ad size) or px (element’s size is absolute).

Examples

Let’s look at examples to get a better understanding.

• See the way the image element behaves when not locked and set to Contain. Regardless of how the ad size changes (while using the same layout, in the example it’s 1920x1080), the image’s borders will stay the same size in % relative to the ad size and an image will float within those marquees.

• See how the image element behaves with locked height and set width in %.
  • When size gets smaller in width (moving the slider horizontally) - the image shrinks proportionally.
  • When size gets smaller in height (moving the slide vertically) - the image stays the same, because regardless of the ad’s height change, width+proportions stay the same.

• See how the image element behaves with locked width and set height in % (reverse to the above example).
  • When size gets smaller in width (moving the slider horizontally) - the image stays the same, because regardless of the ad’s width change, height+proportions stay the same.
  • When size gets smaller in height (moving the slide vertically) - the image shrinks proportionally.

• Lastly, see how the image element behaves locked and with set width or height in px. It behaves in the same way, as if it was not locked and size set in px - size stays absolute, regardless of the ad’s size.

Learn More: To see a demonstration of how to lock a contained element in real time, watch this RAD Academy video.