## Overview

A responsive ad or creative is an ad that doesn't have a fixed height or width (like 300x250). Instead, a responsive ad automatically changes its size and format to fit whatever space it's in. So, the ad may be ~300x250 on one screen, but be ~320x480 on another, based on browser size.

These are used to simplify the number of ad sizes needed for advertising, as well as ensure that users aren't bombarded with too-large ad sizes that disrupt their viewing experience.

Kevel lets you choose a placement based on the width and height of a user's browser window. A dynamically chosen ad size ensures that ads are sized properly for the window, and this can also be used to create placements for mobile devices without using a mobile version of the page.

To do this, you must modify the [Ad Code](https://dev.kevel.co/docs/ad-code) of the ad call by adding an `if` statement to a placement.

For example, this placement will serve if a window's width is less or equal than 400 pixels (which suggests that the page is viewed from a mobile device):

```javascript
if (window.innerWidth <= 400) {
  ados_add_placement(1234, 67890, "azk31626", 23).setZone(12345);
}
```

To add another `if` statement, use `else` with the statement:

```javascript
else if (window.innerWidth >= 750) {
  ados_add_placement(1234, 67890, "azk8820", 4).setZone(12346);
}
```

To serve a placement if none of the if requirements can be met, use else by itself:

```javascript
else {
  ados_add_placement(1234, 67890, "azk23562", 5).setZone(12347);
}
```

A complete ad call that uses all three statements will look like this (with the comments removed):

```javascript
<script type="text/javascript">var p="http",d="static";if(document.location.protocol=="https:"){p+="s";d="engine";}var z=document.createElement("script");z.type="text/javascript";z.async=true;z.src=p+"://"+d+".adzerk.net/ados.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script>
<script type="text/javascript">
  var ados = ados || {};
  ados.run = ados.run || [];
  ados.run.push(function() {
    if (window.innerWidth <= 400) {
      ados_add_placement(1234, 67890, "azk31626", 23).setZone(12345);
    } else if (window.innerWidth >= 750) {
      ados_add_placement(1234, 67890, "azk8820", 4).setZone(12346);
    } else {
      ados_add_placement(1234, 67890, "azk23562", 5).setZone(12347);
    }
    ados_load();
  });
</script>
```

> 📘  
> ### When you create the divs for your placements, you can either use multiple `divs` listed together, or a single `div` that calls all available ad sizes. If you use a single div, make sure the `placementId` (the `azk` code) is the same for all the placements in the Javascript.