Adjusting card CSS for better responsive look

mtlynch · Dec 31, 2017 · 6088821 · 6088821
1 parent ed7ee21
commit 6088821
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/app/_components/recipe-card/recipe-card.component.scss b/src/app/_components/recipe-card/recipe-card.component.scss
@@ -6,9 +6,15 @@
     @include respond-to('small') {
       width: 100%;
     }
+    @include respond-to('x-small') {
+      min-height: 275px;
+    }
     float: left;
     margin-right: 55px !important;
     margin-bottom: 55px !important;
+    @include respond-to('x-small') {
+      margin-bottom: 15px !important;
+    }
 }
 
 .tall-card {
@@ -17,6 +23,11 @@
 
 h3 {
     margin: 15px;
+    margin-bottom: 45px;
+}
+
+.tall-card h3 {
+    margin-bottom: 5px;
 }
 
 a {
@@ -26,6 +37,7 @@ a {
 
 .ingredients {
     padding: 0px 15px 15px 15px;
+    margin-bottom: 35px;
 }
 
 .ingredients ul {
@@ -35,9 +47,6 @@ a {
 footer {
     padding: 15px;
     position: absolute;
-    @include respond-to('small') {
-        position: relative;
-    }
     bottom: 0;
     left: 0;
 }