For a mobile-ready responsive expandable banner. You would follow the same as you do for a regualr HTML banner.

Except you are making 3 of them and hiding the other 2 depending on the screen-size.

Here is the CSS you add. (We are adding CSS media queries.)

<style type="text/css">
#exampleHTMLToPage{
width:728px;
height:90px;
background-image:url(images/responsive_728x90.jpg);}

@media (max-width: 700px)
{#exampleHTMLToPage2 {
width:500px;
height:90px;
background-image:url(images/responsive_500x90.jpg);}}


@media (max-width: 500px)
{ #exampleHTMLToPage3 {
width:320px;
height:90px;
background-image:url(images/responsive_320x90.jpg);}}

@media screen and (min-width: 700px) and (max-width: 3000px) {
#exampleHTMLToPage { display: block; } /* show it on small screens */
}

@media screen and (min-width: 0px) and (max-width: 699px) {
#exampleHTMLToPage { display: none; } /* hide it elsewhere */
}

@media screen and (min-width: 500px) and (max-width: 699px) {
#exampleHTMLToPage2 { display: block; } /* show it on small screens */
}

@media screen and (min-width: 700px) and (max-width: 4000px) {
#exampleHTMLToPage2 { display: none; } /* hide it elsewhere */
}

@media screen and (min-width: 0px) and (max-width: 500px) {
#exampleHTMLToPage2 { display: none; } /* hide it elsewhere */
}

@media screen and (min-width: 0px) and (max-width: 499px) {
#exampleHTMLToPage3 { display: block; } /* show it on small screens */
}

@media screen and (min-width: 500px) and (max-width: 4000px) {
#exampleHTMLToPage3 { display: none; } /* hide it elsewhere */
}

</style>

Our JavaScript Code:

<script type="text/javascript">

// exampleHTMLToPage
var exampleHTMLToPage = ExpandableBanners.banner("exampleHTMLToPage", "html/rexpanded.html", 728, 500);
exampleHTMLToPage.setCloseImage("images/closebutton.jpg", 'right', 'bottom');
exampleHTMLToPage.animated = true;
exampleHTMLToPage.setDirection('down', 'right');

// exampleHTMLToPage2
var exampleHTMLToPage2 = ExpandableBanners.banner("exampleHTMLToPage2", "html/rexpanded2.html", 500, 400);
exampleHTMLToPage2.setCloseImage("images/closebutton.jpg", 'right', 'bottom');
exampleHTMLToPage2.animated = true;
exampleHTMLToPage2.setDirection('down', 'right');

// exampleHTMLToPage3
var exampleHTMLToPage3 = ExpandableBanners.banner("exampleHTMLToPage3", "html/rexpanded3.html", 320, 320);
exampleHTMLToPage3.setCloseImage("images/closebutton.jpg", 'right', 'bottom');
exampleHTMLToPage3.animated = true;
exampleHTMLToPage3.setDirection('down', 'right');


if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}

</script>

And our DIV layer code. Make sure to place this inside of the <body> tags

<body>
<div id="exampleHTMLToPage">
</div>

<div id="exampleHTMLToPage2">
</div>

<div id="exampleHTMLToPage3">
</div>

</body>