Fix mobile design

betagouv · Mar 16, 2017 · bc4d5fd · bc4d5fd
1 parent 3532883
commit bc4d5fd
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/live/app/styles/components/course-list.scss b/live/app/styles/components/course-list.scss
@@ -11,6 +11,7 @@
 
   @media (min-width: 992px) {
     flex-direction: row;
+    flex-wrap: wrap;
   }
 }
 

diff --git a/live/app/styles/index.scss b/live/app/styles/index.scss
@@ -89,32 +89,58 @@ $challenges-title-color: #3d68ff;
 }
 
 .index-page-challenges__container {
-  padding: 70px 90px; // take into account course-item margin-bottom (5px)
-  margin: 0 auto;
   max-width: 1200px;
   display: flex;
+  flex-direction: column;
+  padding: 80px 0 70px 0;
+
+  @media (min-width: 992px) {
+    margin: 0 auto;
+    flex-direction: row;
+    padding: 70px 90px;
+  }
 }
 
 .index-page-challenges__presentation {
   font-family: $font-raleway;
   color: $white;
-  max-width: 300px;
+  text-align: center;
+
+  @media (min-width: 992px) {
+    max-width: 300px;
+    text-align: left;
+  }
 }
 
 .index-page-challenges__presentation-title {
-  font-size: 60px;
+  font-size: 50px;
   font-weight: 800;
+  margin-top: 0;
+
+  @media (min-width: 992px) {
+    font-size: 60px;
+  }
 }
 
 .index-page-challenges__presentation-text {
-  font-size: 37px;
+  font-size:26px;
   font-weight: 300;
   line-height: 1.2;
+
+  @media (min-width: 992px) {
+    font-size: 37px;
+  }
 }
 
 .index-page-challenges__course-list {
   display: flex;
-  margin-left: auto;
+  margin: 0 auto;
+  padding-top: 20px;
+
+  @media (min-width: 992px) {
+    margin-right: 0;
+    padding-top: 0;
+  }
 }
 
 /* Courses