ResponsiveChanges

Author: FatmaAbdElhaleem

style.css

@@ -142,22 +142,7 @@ header section :first-child img{
     grid-gap:20px;
     margin: auto;
 }
-@media  (max-width:768px){
-    .headAfter section{
-        grid-template-columns: 1fr;
-        height: 1200px;
-    }
-    .head p{
-        width: 15rem;
-    }
-    .head h1{
-        font-size: 2.125rem;
-    }
-    html, body {
-        overflow-x: hidden;
-    }
-    
-}
+ 
 .headAfter div i{
     display: inline-block;
     color: var(--textColor);
@@ -230,41 +215,7 @@ header section :first-child img{
     grid-template-columns:repeat(3,1fr);
 
  }
- @media (max-width:768px){
-    .Services >section  {
-       grid-template-columns:1fr;
-      
-    }
-    .Services > div:first-child{
-        width:40%;
-        text-align: center;
-    }
-    .Services >section .img{
-        display: none;
-    }
-    .Services{
-        height: auto;
-        margin-left: 5px;
-        padding-right: 0px;
-        
-    }
-
-    .Special_heading{
-        font-size: 2.5rem;
-        font-weight: 600;
-    }
-    .Special_paragraph{
-        font-size: 0.5rem;
-        /* width:150px; */
-        margin-top: -8px;
-        margin-top: -10px;
-    }
-    .Services > div p{
-         width:150px;
-    }
-    
-     
- }
+  
  .Services >section div div{
     margin-bottom: 50px;
     position: relative;
@@ -325,17 +276,7 @@ header section :first-child img{
     display: grid;
     grid-template-columns: repeat(3,1fr);
  }
- @media (max-width:768px){
-    .cards{
-        grid-template-columns: 1fr;
-        height:1300px;
-    }
-    .Portfolio{
-        height: auto;
-    }
-
-     
- }
+ 
  .cards img{
      display: block;
      width: 100%;
@@ -381,6 +322,7 @@ header section :first-child img{
  /* about section */
  .about{
     padding: 75px;
+    
 
  }
 
@@ -447,27 +389,7 @@ header section :first-child img{
     top: 60px;
     left:200px
 }
-@media (max-width:768px) {
-    .about section{
-        grid-template-columns: 1fr;
-        padding: 0px;
-    }
-    .about .img{
-        display: none;
-        padding-left: 0px;
-    }
-    .about{
-        padding: 30px 0px 5px;
-        margin-bottom: 25px;
-    }
-    .about section div:nth-child(2) p:first-child{
-        font-weight: 400;
-    }
-    .about section div:nth-child(2){
-        padding: 30px;
-    }
-     
-}
+ 
 /* contact section */
 .contact{
     background-color: var(--backColor);
@@ -499,15 +421,7 @@ header section :first-child img{
     font-weight: 800;
     color: var(--textColor);
 }
-@media (max-width:768px) {
-    .contact div:nth-child(2)  p:first-child,
-    .contact div:nth-child(2) a{
-        font-size: 1.3rem;
-    }
-    .contact div:nth-child(2)  p:last-child{
-        font-size: 0.8rem;
-    }
-}
+ 
 /* footer */
 footer{
     height: 80px;
@@ -521,12 +435,116 @@ footer span{
     color:var(--textColor);
     font-weight: bold;
 }
-@media (max-width:768px) {
-    footer{
-     font-size: 10px;
+@media (max-width:412px) {
+    /* after head */
+    .headAfter section{
+        grid-template-columns: 1fr;
+        height: 1200px;
     }
-
+    .head p{
+        width: 15rem;
+    }
+    .head h1{
+        font-size: 2.125rem;
+    }
+    html, body {
+        overflow-x: hidden;
+    }
+    /* services */
+    .Services >section  {
+        grid-template-columns:1fr;
+       
+     }
+     .Services > div:first-child{
+         width:40%;
+         text-align: center;
+     }
+     .Services >section .img{
+         display: none;
+     }
+     .Services{
+         height: auto;
+         margin-left: 5px;
+         padding-right: 0px;
+         
+     }
+ 
+     .Special_heading{
+         font-size: 2.5rem;
+         font-weight: 600;
+     }
+     .Special_paragraph{
+         font-size: 0.5rem;
+         /* width:150px; */
+         margin-top: -8px;
+         margin-top: -10px;
+     }
+     .Services > div p{
+          width:150px;
+     }
+     
+    /* portifolio */
+    .cards{
+        grid-template-columns: 1fr;
+        height:1300px;
+    }
+    .Portfolio{
+        height: auto;
+    }
+    /* contact */
+    .contact div:nth-child(2)  p:first-child,
+    .contact div:nth-child(2) a{
+        font-size: 1.3rem;
+        font-weight: 650;
+    }
+    .contact div:nth-child(2)  p:last-child{
+        font-size: 0.8rem;
+    }
+    /* about */
+    .about section{
+        grid-template-columns: 1fr;
+        padding: 0px;
+    }
+    .about .img{
+        display: none;
+        padding-left: 0px;
+    }
+    .about{
+        padding: 30px 0px 5px;
+        margin-bottom: 25px;
+        
+    }
+    .about section div:nth-child(2) p:first-child{
+        font-weight: 400;
+    }
+    .about section div:nth-child(2){
+        padding: 30px;
+    }
+     
+    /* footer */
+    footer{
+      font-size: 10px;
+     }
 }
+ @media (min-width:413px) and (max-width:1084px){
+    .Services >section .img{
+        display: none;
+    }
+    .Services{
+        height: auto;
+        margin-left: 5px;
+        padding-right: 0px;
+        
+    }
+    .Services >section  {
+        grid-template-columns:1fr 1fr;
+       color:#10cab7 
+     }
+     /*  */
+     .about .img::after{
+        display: none;
+     }
+ }