How to make responsive containers

It is often necessary to make ad containers responsive to different screen sizes to ensure a seamless integration with the surrounding content. For example, you may want certain ads to only appear on larger screens or the ads may require different configuration depending on the screen size.

This is achieved by defining breakpoints with addBreakpoint and referencing them in the container configuration with breakpoints. ADK will handle all the responsiveness and let you observe the state of each container using the ADK Panel which means it is rarely, if ever, preferable to manually hide or conditionally render containers.

In this example we have two ad containers before and after some editorial content. The containers are active (i.e., can render ads) at different screen widths. Resize the browser window around the 1024 pixel breakpoint and observe the containers activating and deactivating accordingly.

adk.config()
    // define breakpoints
    .addBreakpoint('sm', 0)
    .addBreakpoint('md', 768)
    .addBreakpoint('lg', 1024)

    .addTemplate('com.advisible.native.teaser', adk.template.config()
        .url('teaser.html'))

    .addContainer('native-teaser', adk.container.config()
        .breakpoints('sm', 'md')) // active for small and medium screens

    .addContainer('content-display', adk.container.config()
        .breakpoints('lg') // active for large screens
        .params({
            adapters: {
                'com.advisible.content-display': {
                    render: 'com.advisible.native.teaser'
                }
            }
        }))

<div data-adk-container="native-teaser"></div>
<div>
    Editorial content
</div>
<div data-adk-container="content-display"></div>