You can insert infobars either at the top or bottom of pages on your website. They are commonly used to alert visitors about sales, product updates, and other current or upcoming events. Interaction Studio Infobars are partially responsive by default; any content you add to an infobar takes on a definitive height, width, and position. However, if your site is responsive, you can use custom CSS to make the entire infobar behave responsively.
Interaction Studio Classic Only
Please note, the contents of this article are intended for customers using Interaction Studio (formerly Evergage Classic). Do not adjust your beacon version to downgrade or upgrade.
This article details the process for making your infobar responsive and shows an example of one approach.
Create an Infobar Message
Adjust Sizing and Styling
Assign styles to the container DIV
These settings ensure that as the visitor resizes the window, any content within the parent div will adjust to fit the entire width of the infobar.
In Top Level Styles, set the height to auto
This setting ensures the infobar will resize based on the height of the content within it instead of retaining its initial fixed height.
Remove Absolute Positioning Styles
View Your Message
Once your message looks the way you want it to, test your campaign
As you adjust the size of the screen, the message will adjust to accommodate the size of the content within the confines of the screen size
Add Additional Content to the Message
If needed, you can add a CTA to your infobar and it will also behave responsively.