Creating Responsive Banners

Last updated:

To ensure that Prisma Campaigns banners (e.g., 250x100, 400x400 pixels) adapt to various screen sizes and devices, it’s essential to override the default fixed dimensions according to the display size. This article explains how to create responsive banners based on their type (image, HTML, or pop-up) using specific CSS classes. By following these guidelines, banners will seamlessly adjust to different resolutions and devices, enhancing user experience across platforms.

Image Banners

To enable an image banner to dynamically adjust to its container size:

  1. Locate the div element containing the banner’s ID in your integration.
  2. Add the prisma_responsive class to this div.

By completing these steps, the fixed dimensions will be removed, allowing the banner to scale down when its container is smaller than the defined placeholder. For instance, it will shrink on mobile devices but retain its original size on larger screens. This method applies to both carousels and individual banners.

HTML Banners

To ensure that the HTML content of the banner adapts to its container size:

  1. Locate the div element containing the banner’s ID in your integration.
  2. Add the prisma_fluid class to this div.

This class ensures that the rendered HTML content dynamically adjusts to the container’s size. It’s important that the HTML content is also designed to be responsive to the parent container’s dimensions.

To ensure that pop-up banners dynamically adapt to their content without maintaining fixed dimensions, configure the adaptToContent parameter in your integration.

To complete the configuration, follow these steps:

1 ) In the banner integration settings, include the adaptToContent parameter with the value true:

{
    placeholderId: 'popup_placeholder',
    elementId: 'popup_element',
    isolated: false,
    adaptToContent: true
}

Where:

  • placeholderId: ID of the container where the banner will be placed.
  • elementId: ID of the banner element.
  • isolated: Determines whether the banner is rendered in an iframe (true) or not (false).
  • adaptToContent: When set to true, the banner will dynamically adjust to its content, removing fixed dimensions.

2 ) If adaptToContent is set to false or omitted, the banner will adopt the dimensions defined by the placeholder, maintaining a fixed size.