Responsiveness

Author: LostInBrittany

src/experts-profile.html

@@ -86,13 +86,14 @@
         box-shadow        : 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
       }
       paper-material {
-        display           : flex;
-        flex-direction    : row;
+        @apply(--layout-horizontal);
+        padding           : 48px 103px 48px 48px;
+      }
+      paper-material {
         background        : white;
         box-sizing        : border-box;
         width             : 70vw;
         min-height        : 70vh;
-        padding           : 48px 103px 48px 48px;
         border-radius     : 2px;
         margin            : 128px 15vw 17px;
         transition        : box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
@@ -135,6 +136,19 @@
         white-space       : pre-line;
         text-align        : justify;
       }
+
+
+      @media (max-width: 550px) { 
+        paper-material {
+          @apply(--layout-vertical);
+          padding           : 24px 24px 24px 24px;
+        }
+        user-avatar {
+          align-self: flex-end;
+          padding-right     : 0px;
+        }
+      }
+
       iron-icon.edit {
         cursor: pointer;
         margin-left: 15px;