fix case studies page on mobile

kubernetes · Jan 31, 2025 · de7aec2 · de7aec2
1 parent 18396b2
commit de7aec2
Showing 1 changed file with 22 additions and 2 deletions.
diff --git a/assets/scss/case_studies.scss b/assets/scss/case_studies.scss
@@ -1,4 +1,9 @@
 body.cid-casestudies {
+  @media screen and (max-width: 1023px) {
+    #users {
+      padding: 15px;
+    }
+  }
   h2 {
     font-size: 3em;
     font-weight: 300;
@@ -25,7 +30,7 @@ body.cid-casestudies {
     color: #606060;
   }
 
-  .quote + h2, 
+  .quote + h2,
   .quote + .lead {
     margin-top: 0;
   }
@@ -196,6 +201,11 @@ body.td-section.cid-casestudies {
     font-size: 3em;
     margin-top: 2em;
     margin-bottom: 2em;
+    @media screen and (max-width: 767px) {
+      font-size: 2.5em;
+      margin-bottom: 1em;
+      margin-top: 1em;
+    }
   }
 
   #case-studies .case-studies {
@@ -210,6 +220,10 @@ body.td-section.cid-casestudies {
   main > section, main > section:first-child {
     padding-left: 10em;
     padding-right: 10em;
+    @media screen and (max-width: 1439px) {
+      padding-left: 1em;
+      padding-right: 1em;
+    }
   }
 
   .video-quote, .case-study-video {
@@ -237,6 +251,9 @@ body.td-section.cid-casestudies {
     padding: 0 40px 0 242px;
     margin-bottom: 60px;
     min-height: 152px;
+    @media screen and (max-width: 767px) {
+      padding: 0;
+    }
 
     .quote {
       color: black;
@@ -252,14 +269,17 @@ body.td-section.cid-casestudies {
   }
 
   .case-study:nth-child(9), .case-study:nth-child(10) {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 
   .case-study img {
     position: absolute;
     top: 0;
     left: 0;
     width: 215px;
+    @media screen and (max-width: 767px) {
+      position: relative;
+    }
   }
 
   #usersGrid {