added small screen breakpoint; adjusted card heights for various screen sizes

klezi10 · klezi10 · commit b29a9e643f9b · 2022-08-25T11:36:09.000+04:00
diff --git a/styles/Card.module.scss b/styles/Card.module.scss
@@ -8,12 +8,17 @@
   box-shadow: $box-shadow;
   min-width: 32%;
   height: 37rem;
-  
+
+  @include small-mobile {
+    height: 42rem;
+  }
+
   @include tablet {
-    height: 40rem;
+    height: 42rem;
   }
 
   @include desktop {
+    height: 37rem;
     margin: 1.5rem 1.5rem 0 1.5rem;
     &:first-child,
     &:last-child {
@@ -62,7 +67,7 @@
   //About Us
   &.our-goals {
     background-color: $primary-accent-color;
-    max-height: 30rem;
+    max-height: 35rem;
 
     .title {
       font-size: 3.5rem;
diff --git a/styles/_mixins.scss b/styles/_mixins.scss
@@ -50,3 +50,9 @@
     @content;
   }
 }
+
+@mixin small-mobile {
+  @media (max-width: $sm-mobile-breakpoint) {
+    @content;
+  }
+}
diff --git a/styles/_variables.scss b/styles/_variables.scss
@@ -1,4 +1,5 @@
 // Media Query Breakpoints
+$sm-mobile-breakpoint: 350px;
 $mobile-breakpoint: 578px;
 $lg-mobile-breakpoint: 767px;
 $tablet-breakpoint: 768px;

Original file line number	Diff line number	Diff line change
`@@ -50,3 +50,9 @@`
`50`	`50`	`@content;`
`51`	`51`	`}`
`52`	`52`	`}`
	`53`	`+`
	`54`	`+@mixin small-mobile {`
	`55`	`+ @media (max-width: $sm-mobile-breakpoint) {`
	`56`	`+ @content;`
	`57`	`+ }`
	`58`	`+}`