Merge pull request #1216 from appirio-tech/dev

Put back standard logo and members page mobile fixes

Author: ajefts

assets/css/community/members.scss

@@ -47,16 +47,27 @@
     margin-bottom: 6px;
     height: 70px;
     font-family: "Sofia Pro",Arial,Helvetica,sans-serif;
+    @media only screen and (max-width: 768px) {
+      height: auto;
+    }
 
     .stat {
       float: left;
       width: 25% ;
       text-align: center;
+      @media only screen and (max-width: 768px) {
+        width: 100%;
+        float: none;
+        margin-bottom: 10px;
+      }
     }
 
     .statVal {
       color: #3d3d3d;
       font-size: 32px;
+      @media only screen and (max-width: 768px) {
+        font-size: 16px;
+      }
       margin-bottom: 7px;
       position: relative;
     }
@@ -66,7 +77,7 @@
       font-size: 12px;
       font-weight: 400;
       @media only screen and (max-width: 768px) {
-        font-size: 5vw;
+        font-size: 12px;
       }
     }
   }
@@ -236,9 +247,15 @@
     overflow-x: scroll;
     flex-direction: row;
     display: flex;
-    @media screen and (min-device-width: 992px) {
+    padding-bottom: 0;
+    @media screen and (max-width: 768px) {
+      overflow-x: none;
+      flex-wrap: wrap;
+      justify-content: space-around;
+    }
+    @media screen and (min-width: 769px) {
       overflow-x: auto;
-      justify-content: center;
+      justify-content: flex-start;
     }
     @media only screen and (min-width: 1070px) {
       padding-bottom: 33px;
@@ -268,6 +285,14 @@
           margin-left: 33px;
         }
       }
+      @media screen and (max-width: 768px) {
+        margin-bottom: 10px;
+        width: 43%;
+        margin-right: 0;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
     }
     .avatar-wrapper,
     .avatar-wrapper img {
@@ -334,35 +359,67 @@
     overflow-x: scroll;
     flex-direction: row;
     display: flex;
-    @media screen and (min-device-width: 992px) {
-      overflow-x: auto;
-      justify-content: center;
+    @media screen and (max-width: 768px) {
+      overflow-x: none;
       flex-wrap: wrap;
+      justify-content: space-around;
+    }
+    @media screen and (min-width: 769px) {
+      overflow-x: auto;
+      justify-content: flex-start;
     }
     .user-tile {
-      min-width: 246px;
-      margin-right: 15px;
-      padding: 39px 20px 40px;
+      min-width: 150px;
+      width: 180px;
+      max-width: 365px;
+      margin-right: 14px;
+      padding: 20px 0 44.5px;
       &:first-child {
-        margin-left: 15px;
+        margin-left: 14px;
       }
-      @media only screen and (min-device-width: 992px) {
-        width: 272px;
-        margin: 0 6px 14px;
-        padding: 31px 20px 49px;
+      @media only screen and (min-width: 992px) {
+        width: 280px;
+      }
+      @media only screen and (min-width: 1070px) {
+        padding: 20px 30px 28px;
+      }
+      @media only screen and (min-width: 1290px) {
+        width: 365px;
+        padding: 20px 30px 28px;
+      }
+      @media only screen and (min-width: 1367px) {
+        margin-right: 33px;
         &:first-child {
-          margin-left: 6px;
+          margin-left: 33px;
+        }
+      }
+      @media screen and (max-width: 768px) {
+        margin-bottom: 10px;
+        width: 43%;
+        margin-right: 0;
+        &:first-child {
+          margin-left: 0;
         }
       }
     }
     .avatar-wrapper,
     .avatar-wrapper img {
-      height: 80px;
-      width: 80px;
+      height: 62px;
+      width: 62px;
+      display: block;
+      margin: 0 auto;
+      @media only screen and (min-width: 1070px) {
+        height: 90px;
+        width: 90px;
+      }
     }
     .user-name {
-      font-size: 20px;
-      padding-top: 19px;
+      font-size: 15px;
+      padding-top: 11px;
+      @media only screen and (min-width: 1070px) {
+        font-size: 15px;
+        padding-top: 10px;
+      }
     }
     .user-country {
       font-size: 11px;
@@ -640,6 +697,9 @@
 
       .user-name {
         font-size: 15px;
+        @media screen and (max-device-width: 320px) {
+          font-size: 12px;
+        }
       }
     }
   }