Responsive Positioning lets you assign absolute positions to your elements on the screen. The position of your elements will automatically adapt to the screen size changes. You can decide on the final position of elements regardless of device variations. Therefore, you don't need to check and adjust the position of the elements again manually.
Use Responsive Positioning
In the Design step of your campaign, select a template and edit an element in Action Builder. When you choose an element, you will see the Responsive Positioning feature under Settings.
You have two options to align elements: horizontal and vertical. You can set Horizontal Positioning as Left, Right, or Center, and Vertical Positioning as Top, Bottom, or Center.
After setting the positioning, the elements will be displayed in the same pixel and adjusted with the horizontal and vertical alignments.
As you can see in the campaign, the positioning of the message, button, and emoji slider is fixed regardless of the device’s size. The elements have the same set position in different device sizes.
Your elements adapt easily to different device types, which gives your users a better experience on your website.
Use Cases
- Create a Mobile Web InStory with a button element. The button element should be positioned at the bottom, allowing users to tap it easily with their fingers. If you do not set its responsive positioning, the button will not fit on the screen on smaller devices, whereas on larger devices, the button will be too far away from the bottom of the screen.
The result on different devices is as follows:
Since the button should be at the vertical bottom and horizontal center, you can set its Responsive Positioning as “Center, Bottom”. This means that the distance between the button and the bottom line of the screen will always be the same on each device, ensuring a consistent user experience.
When you apply the settings, your campaign has a consistent look on different devices as follows:
- Create a Countdown Bar template with Text, Countdown, and button elements.
- The text element should always be on the left part of the countdown bar. I can set the Responsive Positioning to “Left, Center” because I want the element to be displayed on the left side of each screen size.
- The countdown element should be at the Horizontal and Vertical Center of the template. I move the element to the center and set the Responsive Positioning to “Center, Center” so that the element will always be centered on the screen, regardless of the device size.
- The button element should always be on the right part of the countdown bar. You can set the Responsive Positioning as “Right, Center” for the element to be displayed in each screen size.
- The distance between the text element and the countdown should never change. After deciding their position in the Action Builder, you can set them to “Left, Center” so that they can be positioned according to the left border, and their distance never changes.
- For a better experience, you should set each element.
- When deciding the element's position in Action Builder, you should select the closest points for Responsive Position. For example, you want to put the text on the left. If you set its horizontal position as Center or Right, since the element will decide its positioning based on the distance to the center or right border, on small devices, it will not fit the screen. To solve this problem, you should set it to the Left because the elements adjust their pixel position according to the distance between the selected line and its position in Action Builder.
For example, set the text element as “Center, Center”. It would look as follows:
However, the correct settings are “Left, Center” because the text element is so close to the left border of the screen.
To control different device sizes, click the right mouse button, select Inspect in Action Builder, and change the page's dimensions.
If you add a background image that already includes text, be aware that the image can adjust itself automatically to a responsive size. You should be careful when aligning the image and the element because images adjust their responsive positions by percentage, whereas elements adjust them by pixels. You can practice the same rules above for images as well.