diff --git a/css/html5demos.css b/css/html5demos.css
index 62fee1a..391baad 100644
--- a/css/html5demos.css
+++ b/css/html5demos.css
@@ -1,4 +1,4 @@
-body { 
+body {
   font: normal 16px/20px "Helvetica Neue", Helvetica, sans-serif;
   background: rgb(237, 237, 236);
   margin: 0;
@@ -141,7 +141,7 @@ li {
 button, input {
   font-size: 16px;
   padding: 3px;
-  margin-left: 5px;  
+  margin-left: 5px;
 }
 
 #view-source {
@@ -262,7 +262,7 @@ body.view-source #view-source {
 .tags span:hover,
 .tags span.selected {
   border: 1px solid #75784C;
-  background: #FF7;  
+  background: #FF7;
   color: #333521;
 }
 
@@ -298,12 +298,6 @@ body.view-source #view-source {
   background: url(../images/yourbrowser.gif) no-repeat top right;
 }
 
-#carbonads-container {
-  position: fixed;
-  margin-left: 620px;
-  margin-top: -2px;
-}
-
 /** Pretty printing styles. Used with prettify.js. */
 pre { font-size: 14px; }
 .str { color: #080; }
@@ -317,3 +311,84 @@ pre { font-size: 14px; }
 .atn { color: #606; }
 .atv { color: #080; }
 .dec { color: #606; }
+
+
+/* Carbon Ads */
+#carbonads {
+  position: fixed;
+  display: block;
+  overflow: hidden;
+  margin-top: -2px;
+  margin-left: 620px;
+  padding: 1em;
+  max-width: 130px;
+  border: 1px solid hsl(0, 0%, 91%);
+  background-color: #fbfbfb;
+  text-align: center;
+  font-size: 11px;
+  font-family: Verdana, "Helvetica Neue", Helvetica, sans-serif;
+  line-height: 1.5;
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: inherit;
+}
+
+#carbonads span {
+  display: block;
+  overflow: hidden;
+}
+
+.carbon-img {
+  display: block;
+  margin: 0 auto 1em;
+}
+
+.carbon-text {
+  display: block;
+  margin-bottom: 1em;
+}
+
+.carbon-poweredby {
+  display: block;
+  color: #888 !important;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 8px;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 759px) {
+  #carbonads {
+    position: relative;
+    float: none;
+    margin: 3em auto 1em;
+    max-width: 330px;
+  }
+  #carbonads span {
+    position: relative;
+  }
+  #carbonads > span {
+    max-width: none;
+  }
+  .carbon-img {
+    float: left;
+    margin: 0 1em 0 0;
+  }
+  .carbon-text {
+    float: left;
+    margin-bottom: 0;
+    max-width: calc(100% - 130px - 1em);
+    text-align: left;
+  }
+  .carbon-poweredby {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+  }
+}
diff --git a/includes/header.php b/includes/header.php
index b6b0767..cbece6e 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -9,7 +9,7 @@
 </head>
 <body>
 <section id="wrapper">
-<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html5demoscom" id="_carbonads_js"></script>
     <header>
       <h1><?=$title?></h1>
     </header>
diff --git a/index.php b/index.php
index cc184bb..1768331 100644
--- a/index.php
+++ b/index.php
@@ -47,7 +47,7 @@ function spans($list) {
 </head>
 <body>
 <section id="wrapper">
-<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html5demoscom" id="_carbonads_js"></script>
     <header>
       <h1><abbr>HTML</abbr> 5 Demos and Examples</h1>
     </header>
