diff --git a/examples/side-by-side.css b/examples/side-by-side.css
new file mode 100644
index 0000000000..aabe991891
--- /dev/null
+++ b/examples/side-by-side.css
@@ -0,0 +1,7 @@
+@media (min-width: 800px) {
+  .half {
+    padding: 0 10px;
+    width: 50%;
+    float: left;
+  }
+}
diff --git a/examples/side-by-side.html b/examples/side-by-side.html
index 4defaff50b..557751535f 100644
--- a/examples/side-by-side.html
+++ b/examples/side-by-side.html
@@ -6,10 +6,14 @@ docs: >
   Two maps (one with the Canvas renderer, one with the WebGL renderer) share the same center, resolution, rotation and layers.
 tags: "side-by-side, canvas, webgl"
 ---
-<h4>Canvas</h4>
-<div id="canvasMap" class="map"></div>
-<h4>WebGL</h4>
-<div id="webglMap" class="map"></div>
-<div id="no-webgl" class="alert alert-danger" style="display: none">
-  This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+<div class="half">
+  <h4>Canvas</h4>
+  <div id="canvasMap" class="map"></div>
+</div>
+<div class="half">
+  <h4>WebGL</h4>
+  <div id="webglMap" class="map"></div>
+  <div id="no-webgl" class="alert alert-danger" style="display: none">
+    This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+  </div>
 </div>