From c7b46a13f9b49f4af71c61f7f4e02868332a480a Mon Sep 17 00:00:00 2001
From: Sean McCambridge <seanmccambridgedesign@gmail.com>
Date: Tue, 3 Nov 2015 15:55:14 -0500
Subject: [PATCH] Added media queries for .showcase in docs, creating a
 single-column layout on small screens and a two-column layout on tablet-sized
 screens when viewing showcase of RN apps.

---
 website/src/react-native/css/react-native.css | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index 9ac2edf04..ee2c45016 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -1091,13 +1091,28 @@ div[data-twttr-id] iframe {
 
 .showcase {
   margin: 30px auto;
-  width: 25%;
+  width: 100%;
   display: inline-block;
   text-align: center;
   vertical-align: top;
   transition: 0.2s opacity ease-in;
 }
 
+@media only screen
+  and (min-device-width: 768px)
+  and (max-device-width: 1024px) {
+  .showcase {
+    width: 50%;
+  }
+}
+
+@media only screen
+  and (min-device-width: 1024px) {
+  .showcase {
+    width: 25%;
+  }
+}
+
 .showcase:hover {
   text-decoration: none;
   opacity: 0.8;
@@ -1124,7 +1139,8 @@ div[data-twttr-id] iframe {
   border-radius: 20px;
 }
 
-@media only screen and (max-device-width : 1024px) {
+@media only screen
+  and (max-device-width: 1024px) {
   #content {
     display: inline;
   }