Settings Up Media Queries Breakpoints

MohamedKhamisMostafa · Dec 26, 2023 · 0083b86 · 0083b86
1 parent 7691b21
commit 0083b86
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/css/master.css b/css/master.css
@@ -11,7 +11,7 @@ body {
 }
 
 .container {
-  width: 1170px;
+  width: 100%;
   padding: 15px 0 15px 0;
   margin: auto;
 }
@@ -792,4 +792,27 @@ width: 49%;
 .contact form input:not([type="submit"]):focus::placeholder {
   opacity: 0;
   transition: .3s;
-}
+}
+/* ENd Contact Us */
+/* Start Grid System */
+@media (min-width: 576px){ /* Small Devices => Landscape Phones */
+  .container{
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px){ /* Medium => Tablets */
+  .container{
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px){ /* Desktop */
+  .container{
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px){ /* Large Screens */
+  .container{
+    max-width: 1140px;
+  }
+}
+/* End Grid System */