All credit goes to this website: http://support.moonpoint.com/network/web/html/css/flex-container/. To be honest, the “Moonpoint” site is a bit obscure. I’m not really sure what it is about, but I guess the same could be said about the type-recorder blog too.
The comments/suggestions in this article apply to websites and web applications using Bootstrap (specifically Bootstrap 4.4.1+). These notes may also apply to websites that do not use Bootstrap, but I was using Bootstrap when testing for and writing this article.
The Main Point
You can adjust the alignment (as well as other display features) of your Amazon Affiliate banner using CSS (shocker).
The Amazon Associates Responsive Banners FAQ mentions that the default alignment for a banner is left, but an affiliate may adjust the containing div elements of the banner during installation to alter the alignment to suit the affiliate’s needs.
<div class="alignleft">
<script type="text/javascript">
...
</script>
...
</div>The above code sample depicts the HTML framework of an Amazon Affiliate banner (when using JS instead of iFrame). Notice the “alignleft” class in the containing div.
What is not mentioned anywhere (except in the obscure blog that I provide the link for above) is that the “alignleft”, “aligncenter”, “alignright” classes do not have any defined styling associated with them in your app unless you’ve explicitly defined styling for these classes in your CSS file… Now, most experienced web-devs could probably figure this out on their own, but sometimes (like me) you just need a little refresher (or a smack on the head).
Wait – What about WordPress?
Good question. It turns out that WordPress has built-in definitions for handling the “alignleft”, “aligncenter”, and “alignright” classes in Amazon Affiliate Banner JS HTML (make sure to note the JS and not iFrame).
Check out the ads that are rendered here on this WordPress page with their respective sizes and classes:
| Most Wished for Sofware | 728×90 | “aligncenter” |
| Everything You Need to Upgrade Your PC | 120×600 | “alignleft” |
| Best Sellers in Illustration and Design Software | 120×600 | “alignright” |
| Best Selling Point and Shoot Cameras | 728×90 | “alignright” |
These ads are all being rendered by WordPress’s engine, and they are all responsive (try resizing the page to see). See my notes about what size banners to use for responsive behavior towards the end of this article if you intend to add your own Amazon ads to your blog or site.
And if I’m not using WordPress?
If you are trying to install your banner in your own personal site or app, you’ll have to come up with your own fix until Amazon gives us something.
The Fix
To gain control of your affiliate banner styling/justification in your own personal site or app, you should define styling for the class in the banner’s containing div. Better yet, you should add to or replace the existing class (“alignleft”) with your own class (ex. “aws-flex”) and define the styling for that class inyour CSS file. Here is the styling that I used to center my banner within it’s containing div.
.aws-flex {
display: flex;
justify-content: center;
}And this is what my HTML looked like.
<div class="col"> <!-- Containing div -->
<div class="aws-flex"> <!-- Previously 'alignleft' -->
<script type="text/javascript">
...
</script>
...
</div>
</div>Is it Responsive?
No. This fix looks pretty solid on large size screens and/or with banners that do not require resizing fit on all size screens (125×125 for example). However, when you look at the page on mobile, the banners overflow.
A responsive route?
One route to make the banner more “responsive” is to leverage Bootstrap’s Display Properties to hide elements along with the Bootstrap Grid. Essentially, the idea is to show one banner when the view-port is big, and another banner while the view-port is small. Bootstrap’s Display Properties makes this very straightforward. You are going to do some extra work here, but you’ll have a more responsive solution.
Note: It is possible to show different banners for each view-port size (xs, sm, md, lg, xl), but I will illustrate the concept by showing one banner on lg and above view-ports and another banner on less than lg view-ports.
This is basically the idea:
<div class="row">
<div class="col"></div> <!-- styling div -->
<div class="col mb-2">
<!-- ad shown on lg and xl screens -->
<div class="aws-flex d-none d-md-block">
<script type="text/javascript">
... <!-- large ad content -->
</script>
...
</div>
<!-- ad shown on screens smaller than lg -->
<div class="aws-flex d-md-none">
<script type="text/javascript">
... <!-- small ad content -->
</script>
...
</div>
</div>
<div class="col"></div> <!-- styling div -->
</div>Along with this CSS
.aws-flex {
display: flex;
justify-content: center;
}You can see this concept in action on type-recorder‘s home and about pages.
Alas…
This solution isn’t perfect. If your banner is wider than the view-port, it will get cutoff. It will not overflow, though, and give your page that awkward left/right scroll when viewing on mobile.
My (and Amazon’s) Recommendation
In conclusion, I would also like to note that responsive affiliate banners by Amazon are only recently being developed… I actually thought these would have long existed by now…
Anyhow, Amazon (on its Amazon Associates Responsive Banners FAQ page) recommends that you use Responsive Banners as often as possible (if not everywhere) in your website. As of writing this article, the Responsive Banners are only available in JavaScript (not iFrame!), so make sure to click the JS radio button when copying the link for your website’s banner from the Amazon Affiliate’s hub.
Also, as of writing this article, only 320×50 or 728×90 sized banners are responsive according to the FAQs, and even then, not all of the banners of those sizes are fully responsive.
My recommendation: if you are adding banners to your site, then make sure that you use the JS HTML (not iFrame). Try to stick to the 320×50 or 728×90 sizes whenever possible, or (ideally) use sizes that will not require resizing on mobile along with some creative <div> placement with Bootstrap Display Options. Finally, test on mobile to see how your ads look!
Thanks!
Thanks for reading – I hope this was valuable. If you have additional information concerning this topic to consider, please comment below!