Creating Responsive Banners

Prisma Campaigns banners are created with fixed placeholder dimensions (e.g., 250x100, 400x400 pixels). By default, banners are responsive: they keep their original size when there is enough room, and scale down proportionally when their container is smaller than the placeholder, for instance on mobile devices. This article explains how that default behavior works for each banner type (image, HTML, or pop-up) and which CSS classes you can use to change it.

Default Behavior

No additional configuration is required for a banner to be responsive. When the container is narrower than the placeholder, image banners, HTML banners, and carousels scale down while keeping the placeholder’s aspect ratio. On larger screens, they are displayed at their original size and never stretched beyond it.

Note: Previous versions required adding the prisma_responsive class to the banner’s div to enable this behavior. That class is no longer needed; you can remove it from your integration or leave it in place, as it has no effect.

Keeping Fixed Dimensions

If a banner must always be displayed at the exact size defined by its placeholder, regardless of the container or screen size:

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

<div id="banner_element" class="prisma_fixed"></div>

With this class, image and HTML banners keep the placeholder’s fixed width and height and do not scale down on smaller screens.

Filling the Container

To make a banner fill all the available space of its container, instead of being limited to the placeholder’s original size:

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

<div id="banner_element" class="prisma_fluid"></div>

This class makes the banner take 100% of the width and height of its container:

• HTML banners: the rendered HTML content (including banners displayed inside an iframe) expands to fit the container. It’s important that the HTML content is also designed to be responsive to the parent container’s dimensions.

• Image banners: the image is scaled to fit inside the container while keeping its proportions, so it is never cropped or distorted. To make the image cover the whole container instead (cropping the edges if the proportions don’t match), also add the prisma_banner_cover class:

  <div id="banner_element" class="prisma_fluid prisma_banner_cover"></div>
  

Since the banner takes 100% of the container’s height, make sure the container has a defined height (for example, a fixed height in pixels, or a parent chain with height: 100% up to html and body). Otherwise, the banner may not expand vertically.

Pop-up Banners

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.