From 090b0ef3da1298dc6edec32c126c9178ddb3aa63 Mon Sep 17 00:00:00 2001
From: Jeffrey Hearn <cowbellemoo@gmail.com>
Date: Sun, 8 Jun 2014 01:06:11 -0400
Subject: [PATCH] Responsive embeds and images CSS suggestion

---
 .../building_your_site/frontenddevelopers.rst | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/docs/building_your_site/frontenddevelopers.rst b/docs/building_your_site/frontenddevelopers.rst
index e5f5833979..537e1e80b5 100644
--- a/docs/building_your_site/frontenddevelopers.rst
+++ b/docs/building_your_site/frontenddevelopers.rst
@@ -190,6 +190,32 @@ Only fields using ``RichTextField`` need this applied in the template.
 .. Note::
     Note that the template tag loaded differs from the name of the filter.
 
+Responsive Embeds
+-----------------
+
+Wagtail embeds and images are included at their full width, which may overflow the bounds of the content container you've defined in your templates. To make images and embeds responsive -- meaning they'll resize to fit their container -- include the following CSS.
+
+.. code-block:: css
+
+    .rich-text img {
+        max-width: 100%;
+        height: auto;
+    }
+
+    .responsive-object {
+        position: relative;
+    }
+        .responsive-object iframe,
+        .responsive-object object,
+        .responsive-object embed {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+
 Internal links (tag)
 ~~~~~~~~~~~~~~~~~~~~