From b00dc6d8d143a404acf198502e381a260bd9a0f1 Mon Sep 17 00:00:00 2001
From: Fran Cabrera <fcabrera@us.ibm.com>
Date: Tue, 12 Sep 2017 13:38:36 +0100
Subject: [PATCH] Fixing mobile view

---
 css/style.css | 14 +++++++++++++-
 index.html    |  6 +++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 5492635f4..8bb00011c 100755
--- a/css/style.css
+++ b/css/style.css
@@ -15,15 +15,27 @@ ibm-q-button {
     margin-top: 70px;
 }
 
+@media (max-width: 767px) {
+    .qiskit-title {
+        margin-top: 10px;
+    }
+ }
+
 .qiskit-title p {
     font-size: 1.8em;
     font-weight: 100;
 }
 
 .qiskit-top-banner {
-    padding: 80px 20px;
+    padding: 80px 20px 60px 20px;
 }
 
+@media (max-width: 767px) {
+    .qiskit-top-banner {
+        padding-top: 60px;
+    }
+ }
+
 .qiskit-bottom-banner {
     padding: 40px 20px;
     background-color: #ffffff;
diff --git a/index.html b/index.html
index 8ea92337a..e8246d935 100755
--- a/index.html
+++ b/index.html
@@ -21,11 +21,11 @@
     <!-- Main jumbotron for a primary marketing message or call to action -->
     <div class="container-fuid qiskit-top-banner">
         <div class="row">
-            <div class="col-5 text-right">
+            <div class="col-md-5 text-center text-md-right text-lg-right">
                 <img src="img/qiskit-logo.gif" alt="QISKit Logo" width="256px" height="256px">
             </div>
-            <div class="col-7">
-                <div class="qiskit-title">
+            <div class="col-md-7">
+                <div class="qiskit-title text-center text-md-left text-lg-left">
                     <h1 class="">QISKit</h1>
                     <p>Quantum Information Software Kit</p>
                 </div>