From 0c511442bee1e80b4d08b9067d59e5337065b836 Mon Sep 17 00:00:00 2001
From: Mathieu Sanchez <mathieu.sanchez@outlook.fr>
Date: Tue, 4 Jun 2019 10:37:17 +0900
Subject: [PATCH] Add small screen size responsive

---
 src/app/card-dashboard/card-dashboard.component.css  | 12 ++++++++++++
 src/app/card-dashboard/card-dashboard.component.html |  3 ++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/app/card-dashboard/card-dashboard.component.css b/src/app/card-dashboard/card-dashboard.component.css
index 9509c37..2395192 100644
--- a/src/app/card-dashboard/card-dashboard.component.css
+++ b/src/app/card-dashboard/card-dashboard.component.css
@@ -2,6 +2,10 @@
   margin: 40px;
 }
 
+.card-container.small {
+  margin: 20px;
+}
+
 .card-container.left.desktop {
   margin-right: 20px;
 }
@@ -17,3 +21,11 @@
 .card-container.right.mobile {
   margin-top: 20px;
 }
+
+.card-container.left.small {
+  margin-bottom: 10px;
+}
+
+.card-container.right.small {
+  margin-top: 10px;
+}
diff --git a/src/app/card-dashboard/card-dashboard.component.html b/src/app/card-dashboard/card-dashboard.component.html
index f2be81d..a6e8988 100644
--- a/src/app/card-dashboard/card-dashboard.component.html
+++ b/src/app/card-dashboard/card-dashboard.component.html
@@ -1,4 +1,5 @@
-<div class="card-container {{ matCardClass }}" ngClass.gt-sm="desktop" ngClass.lt-md="mobile">
+<div class="card-container {{ matCardClass }}" ngClass.gt-sm="desktop" ngClass.lt-md="mobile"
+     ngClass.xs="small">
 
   <mat-card>