From a92128e7fb158f4aadc31e549ff96c4645cd9d83 Mon Sep 17 00:00:00 2001
From: Almero Steyn <almero.steyn@gmail.com>
Date: Thu, 20 Apr 2017 12:49:48 +0200
Subject: [PATCH] [Docs: Installation] Fix tabs responsive layout - Resubmit
 (#9458)

* [Docs: Installation] Fix tabs responsive layout

* Move tabs a pixel down

* Remove left margin on first tab

* Remove the long line

* Fix mobile styles
---
 docs/docs/installation.md | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/docs/docs/installation.md b/docs/docs/installation.md
index 615a1726ea..bbbaf4cadc 100644
--- a/docs/docs/installation.md
+++ b/docs/docs/installation.md
@@ -23,21 +23,43 @@ React is flexible and can be used in a variety of projects. You can create new a
   <style>
     .toggler li {
        display: inline-block;
+       position: relative;
+       top: 1px;
        padding: 10px;
-       margin: 2px;
+       margin: 0px 2px 0px 2px;
        border: 1px solid #05A5D1;
-       border-radius: 3px;
+       border-bottom-color: transparent;
+       border-radius: 3px 3px 0px 0px;
        color: #05A5D1;
        background-color: transparent;
        font-size: 0.99em;
        cursor: pointer;
     }
+    .toggler li:first-child {
+      margin-left: 0;
+    }
+    .toggler li:last-child {
+      margin-right: 0;
+    }
     .toggler ul {
+      display: inline-block;
       list-style-type: none;
       margin: 0;
+      border-bottom: 1px solid #05A5D1;
+      cursor: default;
     }
-    .toggler li {
-      display: inline;
+    @media screen and (max-width: 960px) {
+      .toggler li,
+      .toggler li:first-child,
+      .toggler li:last-child {
+        display: block;
+        border-bottom-color: #05A5D1;
+        border-radius: 3px;
+        margin: 2px 0px 2px 0px;
+      }
+      .toggler ul {
+        border-bottom: 0;
+      }
     }
     .display-target-fiddle .toggler .button-fiddle:focus,
     .display-target-newapp .toggler .button-newapp:focus,