Experience Scaling Behavior

A Creator Studio Experience responds to width of the page or container in which it is published. The Experience will proportionally scale to fit into the available space, and will be centered both horizontally and vertically.

For Enhanced and Legacy Code publishing, this means the experience will by default be full width, and will adjust its height based on that width to maintain the aspect ratio at which is was built.

For Drag and Drop or Manual publishing, it is always recommendable to create an Experience with the same aspect ratio as the HTML container that it will be published in. One reliable way to do this is to use our DIV Generator tool. If you're going to manually code the container, use the info below as a guide for how to ensure the experience scales as desired/expected.

There are two main cases to consider:

• Same Aspect ratio on Experience and HTML container.
• Different Aspect ratio on Experience and HTML container. 

Same aspect ratio on Experience and HTML container

Let us assume you are creating an Experience (600 x 400 pixels) and you wish to publish it into the following HTML container (900 x 600 pixels).

<div id=”my-container-id” style=”width:900px;height:600px;”></div>

Your Experience will scale up to fit into the HTML container as illustrated below:

since the Experience and HTML container have the same aspect ratio of 3 : 2.

To make sure the dimensions on your Experience fit perfectly to your HTML container, use the relation:

 Experience height           Container height
----------------------   =   -------------------
Experience width            Container width

These are examples of Experiences that would all fit the container above with the aspect ratio of 3 : 2:

• 600 x 400 pixels (scaling up)
• 900 x 600 pixels (same as HTML container)
• 1200 x 800 pixels (scaling down)

If you are not sure how to dimension your Experience that will fit your HTML container, you can use online calculators like this one.

Important: if the HTML container keeps its aspect ratio as the viewport might change (for instance, when on mobile or tablet devices), the Experience will continuously fit the HTML container.

Different aspect ratio on Experience and HTML container

Let us now assume you are creating an Experience (400 x 400 pixels) and you wish to publish it into one of the following HTML containers (600 x 900 pixels or 900 x 600 pixels):

<div id=”my-first-container-id” style=”width:600px;height:900px;”></div>

<div id=”my-second-container-id” style=”width:900px;height:600px;”></div>

In these cases the aspect ratio is NOT the same on the Experience and the HTML container, and hence the white background of the HTML container will appear as white bars or columns around the Experience. To avoid showing the white background, use the Responsive Backdrop.

The following two illustrations show how this behavior would look, where white bars or columns will appear since we center the Experience both horizontally and vertically.