Fix mobile style and bug with footer. (#785)

client/src/app-components/password-recovery.scss

@@ -24,3 +24,15 @@
         margin-bottom: 30px;
     }
 }
+
+@media screen and (max-width: 320px) {
+    .widget {
+        margin-left: -12px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .password-recovery__content {
+        width: 100%;
+    }
+}

client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.scss

@@ -2,5 +2,9 @@
 
     &_wrapped {
         padding: 0 10px;
+
+        @media screen and (min-width: 993px){
+            float: none;
+        }
     }
 }

client/src/app/main/dashboard/dashboard-layout.scss

@@ -1,4 +1,8 @@
 .dashboard {
+    @media screen and (min-width: 993px){
+        display: flex;
+    }
+
     &__menu {
         margin-bottom: 10px;
     }

client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.scss

@@ -2,6 +2,10 @@
 
 .dashboard-list-articles-page {
 
+    @media screen and (min-width: 993px){
+        float: none;
+    }
+
     &__search-results {
 
     }

client/src/app/main/main-home/main-home-page-login-widget.scss

@@ -18,14 +18,31 @@
     &__message {
         margin-top: 18px;
     }
-  
-  @media screen and (min-width: 379px) {
-      .login-widget__container {
-          min-width: 324px;
-      }
-  }
-  @media screen and (max-width: 409px) {
-      .login-widget__container {
-          min-width: 313px;
-      }
-  }}
+}
+
+@media screen and (min-width: 379px) {
+    .login-widget__container {
+        min-width: 324px;
+    }
+    .Widget {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 409px) {
+    .login-widget__container {
+        min-width: 313px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .login-widget__container {
+        width: 100%;
+    }
+    .main-home-page__widget {
+        width: 100%;
+    }
+}

client/src/app/main/main-layout-header.scss

@@ -5,6 +5,9 @@
     border-radius: 4px 4px 0 0;
     width: 100%;
     position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 
     &__user-name {
         color: $primary-red;
@@ -20,7 +23,6 @@
 
     &__languages {
         display: inline-block;
-        float: right;
         position: relative;
         top: 5px;
         margin: 0 6px;
@@ -31,4 +33,17 @@
             float: none;
         }
     }
+
+    @media (max-width: 363px) {
+        .main-layout-header__login-links{
+           padding: 8px 0 0 0;
+        }
+    }
+
+    @media (max-width: 350px) {
+        .main-layout-header__languages {
+            margin: 0 3px;
+            left: unset;
+        }
+    }
 }

client/src/app/main/main-layout.scss

@@ -11,5 +11,17 @@
     &--content {
         min-height: 400px;
         padding: 20px;
+
+        @media screen and (min-width: 993px) and (max-width: 1032px) {
+            padding: 20px 0.45%;
+        }
+
+        @media screen and (max-width: 353px) {
+            padding: 20px 10px;
+        }
+
+        @media screen and (max-width: 333px) {
+            padding: 20px 0;
+        }
     }
 }

client/src/app/main/main-signup/main-signup-widget.scss

@@ -1,19 +1,23 @@
-    .signup-widget {
-        padding: 30px;
-        text-align: center;
+.signup-widget {
+    padding: 30px;
+    text-align: center;
 
-        &__form {
-            margin-bottom: 20px;
-        }
-
-        &__inputs {
-            display: inline-block;
-            margin: 0 auto;
-        }
-
-        &__captcha {
-            margin: 10px auto 20px;
-            height: 78px;
-            width: 304px;
-        }
+    @media screen and (min-width: 993px){
+        float: none;
     }
+
+    &__form {
+        margin-bottom: 20px;
+    }
+
+    &__inputs {
+        display: inline-block;
+        margin: 0 auto;
+    }
+
+    &__captcha {
+        margin: 10px auto 20px;
+        height: 78px;
+        width: 304px;
+    }
+}

client/src/core-components/card.scss

@@ -24,6 +24,12 @@
         bottom: 17px;
     }
 
+    @media (max-width: 1060px) {
+        .button {
+            width: 80%;
+        }
+    }
+
     &_red {
         background-color: $primary-red;
     }

client/src/scss/_reset.scss

@@ -1131,7 +1131,7 @@ pre code {
     margin-left: 0%;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 993px) {
   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
     float: left;
   }