mobile responsive code added...

adserasinghe · Feb 21, 2024 · e88c61f · e88c61f
1 parent 3f3dfad
commit e88c61f
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 2 deletions.
diff --git a/about us/style.css b/about us/style.css
@@ -313,4 +313,23 @@ h5{
 		flex-basis: 22%;
 		margin: 1.5%;
 	}
-}
+}
+/* Styles for mobile and tablets */
+@media only screen and (max-width: 1023px) {
+	.slider-wrapper .slide-button {
+	  display: none !important;
+	}
+	.slider-wrapper .image-list {
+	  gap: 10px;
+	  margin-bottom: 15px;
+	  scroll-snap-type: x mandatory;
+	}
+	.slider-wrapper .image-list .image-item {
+	  width: 280px;
+	  height: 380px;
+	}
+	.slider-scrollbar .scrollbar-thumb {
+	  width: 20%;
+	}
+  }
+/*works card list end*/
diff --git a/contact/style.css b/contact/style.css
@@ -396,4 +396,22 @@ p:hover{
     position: flex;
     z-index: -3;
   }
-
+  /* Styles for mobile and tablets */
+  @media only screen and (max-width: 1023px) {
+    .slider-wrapper .slide-button {
+      display: none !important;
+    }
+    .slider-wrapper .image-list {
+      gap: 10px;
+      margin-bottom: 15px;
+      scroll-snap-type: x mandatory;
+    }
+    .slider-wrapper .image-list .image-item {
+      width: 280px;
+      height: 380px;
+    }
+    .slider-scrollbar .scrollbar-thumb {
+      width: 20%;
+    }
+    }
+  /*works card list end*/
diff --git a/hero/style.css b/hero/style.css
@@ -264,3 +264,22 @@ h5{
 	position: flex;
 	z-index: -3;
 }
+/* Styles for mobile and tablets */
+@media only screen and (max-width: 1023px) {
+	.slider-wrapper .slide-button {
+	  display: none !important;
+	}
+	.slider-wrapper .image-list {
+	  gap: 10px;
+	  margin-bottom: 15px;
+	  scroll-snap-type: x mandatory;
+	}
+	.slider-wrapper .image-list .image-item {
+	  width: 280px;
+	  height: 380px;
+	}
+	.slider-scrollbar .scrollbar-thumb {
+	  width: 20%;
+	}
+  }
+/*works card list end*/