Within the campaign builder, you will have the option to enable campaign dimensions. When Bound targets the campaign element, these dimensions are written as inline styles to that element. This allows you to overwrite the site styles without any custom css required.

(You can, of course, choose to leave this feature disabled. In this case, the element would simply inherit the features and sizing dictated on the site.)

The platform supports the following campaign dimension units which you will see in a dropdown after the width and height inputs in the form:

• auto
• inherit (default)
• px
• %
• vw / vh 

auto

Auto works differently for different campaigns:

• Embedded and Modal: fits width of containing element or in the modal's case the page.
• Banner and Flyin: will only display as wide as the content it contains

Please note that this will fit to the text or image these campaign elements contain, so you may want to add some custom css to include padding around the content, especially for text content so that it does not appear under the close button in the flyin, modal, or banner.

Tip: For Banner campaigns it is not recommended that you use "auto" for the element's width as banners are generally expected to stretch across the entire width of the page, and with this set it will only stretch as far across as the content it contains.

inherit (default)

Inherit works similarly to disabling campaign dimensions and just letting the site css control the dimensions of your campaign element.  You would only want to use this with an embedded campaign, and a great example would be where you have an element that has a responsive width that you just want to inherit, but a static height that you want to override since your new content item is a bit taller.  You could set width to inherit, and height to auto and it would fully display the content vertically, and collapse/expand the width based on screen size.

px

Pixel (px) dimensions are great for static dimensions where you always want it to be x wide or y tall.

%

Percentage (%) based dimensions are relative to the width or height of their containing or parent element.  This means that if a parent element has a width of 500px and you set the width of your campaign element to 50% it will be half the width of that parent element.

A better and more relevant use for this is in Responsive Web Designs (RWD).  Most responsive frameworks like Bootstrap, Foundation, and others use percentage based widths and heights for their responsive grid layouts.  By setting up a campaign element in GSC with a 100% width in an element that also has a percentage based width it will expand/collapse (...respond) to the current screen size within the responsive element.

Be careful with setting 100% height on a campaign element. If the parent element doesn't have a set height or minimum height, 100% of nothing will be 0.  

vw / vh

VW and VH are viewport dimensions. Similarly to using percentage, using vw and vh allows you to create campaign dimensions that are variable. However, while the percentage dimensions will vary based upon the size of the parent element, the viewport dimensions will vary based upon the size of the viewport itself. This is a very important distinction.

For example, if you wanted to serve a fly-in on a page where the body element was 5,000 pixels tall, it would be important to use vh rather than % for the height. Using vh, will make sure the fly-in scales appropriately to the window in which the content is viewed, but using percentage, would scale the fly-in relative to the full height of the body element.

As in the above case of a fly-in, using viewport dimensions is especially helpful when building overlay campaigns that you want to adapt to the size of the accessing device's screen. 

Note: Dimensions for Wistia Videos (as of June 2016)

For Wistia videos we have updated the stored embedCode to correctly respond to the dimensions of the parent container.  Since most videos are wider than they are tall, you will need to set the width of the video to a px or % value, and you can set height to a px or % value as well or leave it as auto.  Note that if you set the height to a value greater than the height of the embedded video as determined by it's width (scales proportionally), you will see white-space above and below your video in the campaign element.

Do not set width and height both to auto or inherit as the video will not take up any space since the campaign element will be 0px x 0px.