Bannernow allows you to create fully responsive HTML5 banners using the constraints and the relative position tools.
Table of Contents
Constraints Panel
Constraints indicate how layers/elements should respond when you resize their frames. This helps you control how designs look across different screen sizes and devices.
There are Horizontal and vertical constraints.
Horizontal constraints define how a layer behaves as you resize the frame along the x-axis.
- Left maintains the layer’s position, relative to the left side of the frame.
- Right maintains the layer’s position, relative to the right side of the frame.
- Left and right maintains the layer’s size and position relative to both sides of the frame. This may cause layers to grow or shrink along the x axis, when resized.
- Center maintains the layer’s position, relative to the horizontal center of the frame.
- Scale will define the layer’s size and position as a percentage of the frame’s dimensions. It will then maintain those proportions as you resize it.
- Relative means that these constraints depend on the relative positioning, or comparison with other layers
Vertical constraints define how a layer behaves as you resize the frame along the y-axis.
- Top maintains the layer’s position, relative to the top of the frame.
- Bottom maintains the layer’s position, relative to the bottom of the frame.
- Top and bottom maintains the layer’s size and position relative to the top and bottom of the frame. This may cause layers to grow or shrink along the y axis, when resized.
- Center maintains the layer’s position, relative to the vertical center of the frame.
- Scale will define the layer’s size and position as a percentage of the frame’s dimensions. It will then maintain those proportions as you resize it.
- Relative means that these constraints depend on the relative positioning, or comparison with other layers
Horizontal : Left Vertical: Top

Horizontal : Right Vertical: Bottom

Horizontal : Scale Vertical: Scale

Horizontal : Left and Right Vertical: Top and Bottom

Relative position
Let’s now explore the Relative feature, which enables you to create constraints based on relative positioning in comparison with other layers.
Consider a product price feed. Each price consists of three elements: currency, product cost, and payment frequency. When the price changes, it should retain its relative structure.
Let’s connect each element of the price to the data feed.
Connect payment frequency:


Connect product cost:


Connect currency:


Next, let’s set Constraints to each layer.
Let’s say we want the price to be always positioned to the right bottom corner of our creative.
First set the “per MO” text to the right bottom and also the text container – Dynamic Width and Height. In case there is more text, the container will resize.
The second price element “499” should remain adjacent to the “per MO” text, maintaining a 2px distance between them.
Set the Relative option for both horizontal and vertical axes.
For horizontal and vertical select the anchor points: left X position and bottom Y position relative to “per MO”.
For horizontal, set offset -2px, separating “499” element from the “per MO”.
The third currency element “$” should remain adjacent to the “499” text, maintaining a 2px distance between them and aligned to the top.
Set the Relative option for both horizontal and vertical axes.
For horizontal and vertical select the anchor points: left X position and top Y position relative to “499”.
For horizontal set offset -2px, separating “$” element from “499”.
Let’s see the result.
This feature is very useful for creatives connected to feeds because it ensures that ads are always well-structured and prevent elements from sliding out of place or becoming misaligned.
Publish Responsive HTML5 ads
To publish the Responsive banner always select the Responsive Width & Height option and place the AdTag/Embed code in a responsive div container on your page or use a responsive placeholder in DSP/SSP:
