Fix contact and cv pages scaling for small screens

alex-irt · Jun 19, 2017 · 51fd5e9 · 51fd5e9
1 parent b3a57ef
commit 51fd5e9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/src/app/contact/contact.component.css b/src/app/contact/contact.component.css
@@ -1,11 +1,17 @@
 md-card {
   float: left;
   width: 420px;
-  margin: 10px;
+  margin: 20px !important;
 }
 
 md-card.full {
-  width: calc(100% - 68px);
+  width: calc(100% - 88px);
+}
+
+@media only screen and (max-width: 600px) {
+  md-card {
+    width: calc(100% - 68px) !important;
+  }
 }
 
 md-card-title {
@@ -36,6 +42,15 @@ a {
   border-bottom: 1px solid rgba(0,0,0,0.2);
 }
 
+@media only screen and (max-width: 600px) {
+  .line {
+    width: calc(100% + 32px);
+    left: -16px;
+    right: -16px;
+  }
+}
+
+
 .mat-list-icon {
   color: rgba(0, 0, 0, 0.54);
 }

diff --git a/src/app/cv/cv.component.css b/src/app/cv/cv.component.css
@@ -1,11 +1,11 @@
 md-card {
   float: left;
   width: 420px;
-  margin: 10px;
+  margin: 20px !important;
 }
 
 md-card.full {
-  width: calc(100% - 68px);
+  width: calc(100% - 88px);
 }
 
 p, li {
@@ -14,7 +14,11 @@ p, li {
   font-family: 'Roboto', sans-serif;
 }
 
-
+@media only screen and (max-width: 600px) {
+  md-card {
+    width: calc(100% - 68px) !important;
+  }
+}
 
 md-chip {
   font-size: 15px !important;
@@ -44,3 +48,11 @@ md-card-title.large {
   right: -24px;
   border-bottom: 1px solid rgba(0,0,0,0.2);
 }
+
+@media only screen and (max-width: 600px) {
+  .line {
+    width: calc(100% + 32px);
+    left: -16px;
+    right: -16px;
+  }
+}