diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index ebd2ac891..5f6de71c6 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -10,7 +10,7 @@
     This content will be hidden for smaller screens.
   -->
 
-  <div fxFlex="70%" fxLayout="column" fxLayoutAlign="center center" fxHide.lt-md class="cover">
+  <div fxFlex="70%" fxLayout="column" fxLayoutAlign="center center" fxHide.lt-sm class="cover">
     <div class="cover-content">
       <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate}}</h1>
       <p class="mat-headline cover-description">
@@ -30,7 +30,7 @@
       Footer
   -->
 
-  <div fxLayout="column" fxFlex.gt-md="1 0 30%" class="login-container">
+  <div fxLayout="column" fxFlex.gt-sm="1 0 30%" class="login-container">
 
     <!-- Language Selector to the extreme right -->
     <div fxLayout="row-reverse" fxFlex="1 0 auto">
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index eebcedda5..a19af21d2 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -48,7 +48,8 @@
 .login-container {
   box-shadow: 1px 1px 50px #000;
   height: 100vh;
-  overflow: auto;
+  width: 100%;
+  min-width: 21.5 rem;
 
   .img-container {
     max-width: 18rem;