I recently purchased a theme which includes the option to display a banner in the header. The banner can be displayed using either a static image or javascript. The particular javascript code I'm using is for an Amazon banner ad and is displayed on the frontend via an iframe.
Using a static image the banner displays correctly as you can see here: http://capethemes.com/demo/portal/review/
When using the javascript code, however, the banner is not visible. Upon inspecting the source code, I discovered that the script tags and html containing block are there but the iframe element is missing.
Anyway, I was able to ascertain that it is a styling issue but am not sure how to resolve it. The following default theme styles are being applied to the .headad
element:
.headad {
float: right;
position: absolute;
top: 50%;
right: 0;
margin: -65px 0 0 0;
}
...and here's the snippet used to display the banner:
echo '<div class="clearfix"></div><div class="headad">';
echo htmlspecialchars_decode($themnific_redux['tmnf-headad-script']);
echo '</div>';
UPDATE #1
I've found I need to set a value for the width property on the .headad
div to get the banner to display. Presumably this is because it's a responsive banner and therefore there has to be a width specified for the containing element so the appropriately sized banner image can be served.
Here's an overview of all the relevant details:
HTML markup of banner ad and containing div (I have only included the outer HTML)
<div class="headad">
<script type="text/javascript"></script>
<script></script>
<div ><iframe></iframe></div>
</div>
CSS for .headad
element
.headad {
float: right;
position: absolute;
top: 50%;
right: 0;
margin: -65px 0 0 0;
}
This is the default theme CSS. I have changed float: right;
to float: none;
because position: absolute;
is already being applied to the element. As I have already mentioned, to get the banner to display I have to set a value for the width property.
iframe CSS
iframe {
border: none;
display: inline-block;
width: 728px;
height: 90px;
}
UPDATE #2
I reproduced this on jsfiddle. You can view it here.
Because this is a responsive banner, the width of the containing element has to be specified so the appropriately sized image can be returned. Maybe have to define a set of width property values using media queries for the .headad
element?