From e900011697c8094289061832b2f068125ad15615 Mon Sep 17 00:00:00 2001
From: Shashank <shanksmgr1@gmail.com>
Date: Thu, 8 Oct 2015 22:41:27 +0530
Subject: [PATCH 1/3] Container aspect ratio trick

Container aspect ratio retaining trick in fluid responsive design. The width and height changes as per the width of device maintaing aspect ratio of the box (container).
---
 README.md | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 70e0c495..43062700 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,7 @@ A collection of tips to help take your CSS skills pro.
 1. [Equal Width Table Cells](#equal-width-table-cells)
 1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox)
 1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links)
+1. [Maintain a container aspect ratio as per fluid width](#use-padding-top-trick) 
 
 
 ### Use `:not()` to Apply/Unapply Borders on Navigation
@@ -230,7 +231,32 @@ a[href^="http"]:empty::before {
 
 That's pretty convenient.
 
+### Use `padding-top` Trick
+
+This is usefull where ever you encounter fluid responsive container boxes (product catalog grid etc). Use a parent container having fluid `width`:
+
+```css
+.container {
+width:20%; /*some value based on responsive need.*/
+}
+
+/*a content wrapper.*/
+.container > div {
+width:100%;
+display:inline-block;
+}
+/*padding-top is relative to width of the parent container that is the trick 
+* here the aspect ratio is 1:1 a square box.
+*/
+.container > div > .content {
+    padding-top: 120%;
+    width: 100%;
+    height: 0;
+    position:absolute;
+    top:0;
+    left:0;
+}
 
 ### Support
 
-These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11.
\ No newline at end of file
+These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11.

From 0ce30c65f74c15a76f6a8bebc5427c29b2822301 Mon Sep 17 00:00:00 2001
From: Shashank <shanksmgr1@gmail.com>
Date: Thu, 8 Oct 2015 22:42:31 +0530
Subject: [PATCH 2/3] formatting

formatting changes
---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 43062700..71ba3148 100644
--- a/README.md
+++ b/README.md
@@ -245,6 +245,7 @@ width:20%; /*some value based on responsive need.*/
 width:100%;
 display:inline-block;
 }
+
 /*padding-top is relative to width of the parent container that is the trick 
 * here the aspect ratio is 1:1 a square box.
 */
@@ -256,6 +257,7 @@ display:inline-block;
     top:0;
     left:0;
 }
+```
 
 ### Support
 

From bae13ff9536054a3341781b546a04af396550d59 Mon Sep 17 00:00:00 2001
From: Shashank <shanksmgr1@gmail.com>
Date: Thu, 8 Oct 2015 23:43:45 +0530
Subject: [PATCH 3/3] Modified with demo

More accurate css with codepen demo Thanks
---
 README.md | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 71ba3148..692e3425 100644
--- a/README.md
+++ b/README.md
@@ -236,29 +236,40 @@ That's pretty convenient.
 This is usefull where ever you encounter fluid responsive container boxes (product catalog grid etc). Use a parent container having fluid `width`:
 
 ```css
+/*some value based on responsive need.*/
+
 .container {
-width:20%; /*some value based on responsive need.*/
+    width: 20%;
 }
-
 /*a content wrapper.*/
+
 .container > div {
-width:100%;
-display:inline-block;
+    width: 100%;
+    height: 0;
+    position: relative;
 }
-
 /*padding-top is relative to width of the parent container that is the trick 
 * here the aspect ratio is 1:1 a square box.
 */
-.container > div > .content {
-    padding-top: 120%;
+
+.container > div:before {
+    padding-top: 100%;
     width: 100%;
-    height: 0;
-    position:absolute;
-    top:0;
-    left:0;
+    background: #009530;
+    border-radius: 8px;
+    content: ' ';
+    position: absolute;
+    top: 0;
+}
+.container .content {
+    position: absolute;
+    font-size: 2em;
+    color: blue;
 }
 ```
 
+CodePen - [Demo](http://codepen.io/shanksrepo/pen/OygmNB) Change the width of browser to see the effect. 
+
 ### Support
 
 These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11.