flexbox services page

dmd-web-and-mobile · Mar 31, 2016 · 594f05c · 594f05c
1 parent e294e58
commit 594f05c
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 31 deletions.
diff --git a/www/wp-content/themes/ation2016/src/styles/components/_services.scss b/www/wp-content/themes/ation2016/src/styles/components/_services.scss
@@ -7,22 +7,39 @@
         }
     }
 
-    .service {
-        padding: 10%;
-        background-color: $grey;
-        color: white;
-        margin-bottom: 20px;
+    .flex {
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        overflow: hidden;
+        flex-wrap: wrap;
+        -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
 
-        h1 {
-            margin-top: 0;
-            text-align: center;
-            font-family: $header-font;
-            font-size: 25px;
-        }
-
-        p {
-            font-family: $header-font;
+        .service {
+            display: flex;
             color: white;
+            margin-bottom: 20px;
+
+            .content {
+                display: flex;
+                flex-direction: column;
+                background-color: $grey;
+                padding: 20px;
+            }
+
+            h1 {
+                margin-top: 0;
+                text-align: center;
+                font-family: $header-font;
+                font-size: 25px;
+            }
+
+            p {
+                font-family: $header-font;
+                color: white;
+            }
         }
+
     }
 }
diff --git a/www/wp-content/themes/ation2016/static/styles/site.css b/www/wp-content/themes/ation2016/static/styles/site.css
@@ -5865,19 +5865,37 @@ section#content {
   width: 70px;
   height: 70px; }
 
-.services .service {
-  padding: 10%;
-  background-color: #a8a8a8;
-  color: white;
-  margin-bottom: 20px; }
-  .services .service h1 {
-    margin-top: 0;
-    text-align: center;
-    font-family: "Source Sans Pro", sans-serif;
-    font-size: 25px; }
-  .services .service p {
-    font-family: "Source Sans Pro", sans-serif;
-    color: white; }
+.services .flex {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap; }
+  .services .flex .service {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    color: white;
+    margin-bottom: 20px; }
+    .services .flex .service .content {
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      background-color: #a8a8a8;
+      padding: 20px; }
+    .services .flex .service h1 {
+      margin-top: 0;
+      text-align: center;
+      font-family: "Source Sans Pro", sans-serif;
+      font-size: 25px; }
+    .services .flex .service p {
+      font-family: "Source Sans Pro", sans-serif;
+      color: white; }
 
 footer {
   border-top: 1px solid #eeeeee; }

diff --git a/www/wp-content/themes/ation2016/static/styles/site.min.css b/www/wp-content/themes/ation2016/static/styles/site.min.css
diff --git a/www/wp-content/themes/ation2016/templates/page-services.twig b/www/wp-content/themes/ation2016/templates/page-services.twig
@@ -100,10 +100,10 @@
         </style>
     <div class="container services">
 
-        <div class="row">
+        <div class="flex row">
             {% for service in services %}
-                <div class="col-xs-12 col-sm-6 col-md-4">
-                    <div class="service">
+                <div class="service col-md-4 col-sm-6 col-xs-12">
+                    <div class="content">
                         <h1>{{ service.name }}</h1>
                         <p>{{ service.description }}</p>
                     </div>