Homepage Responsive for Tablet and Mobile

zmercury · Jun 26, 2023 · 857a838 · 857a838
1 parent 5617b30
commit 857a838
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -93,7 +93,7 @@ <h1 class="innerHeroTopLeftHeading">WE BELIEVE IN CREATING <br>A NURTURING ENVIR
     </div>
 
     <div class="alternateHeroContainer">
-        <span>
+        <span class="measuresContent">
             <i class="fa fa-info-circle" aria-hidden="true"></i>
             Our school has implemented all necessary safety measures for the COVID-19 virus, ensuring the safety of all students.
         </span>
@@ -137,7 +137,7 @@ <h3 class="rightTopHeading">School Counseling</h3>
             <div class="principalInnerContainer">
                 <div class="innerLeft">
                     <div class="innerLeftImageContainer">
-                        <img src="./images/principalQuality.jpg" alt="" class=innerLeftImage">
+                        <img src="./images/principalQuality.jpg" alt="" class="innerLeftImage">
                     </div>
                     <div class="innerLeftContent">
                         <span class="infoPara">Message from Principal</span>
@@ -150,7 +150,7 @@ <h2 class="infoheading">Govinda Bahadur Khadka</h3>
                 </div>
                 <div class="innerLeft">
                     <div class="innerLeftImageContainer">
-                        <img src="./images/directorQuality.jpg" alt="" class=innerLeftImage">
+                        <img src="./images/directorQuality.jpg" alt="" class="innerLeftImage">
                     </div>
                     <div class="innerLeftContent">
                         <span class="infoPara">Message from Director</span>

diff --git a/style.css b/style.css
@@ -66,6 +66,21 @@ body {
     }
 }
 
+@media screen and (max-width: 992px) {
+    #toggleButton {
+        display: none;
+    }
+
+    .navContainer {
+        display: none;
+    }
+
+    .innerHeaderContainer {
+        width: 84% !important;
+        justify-content: space-between   !important;
+    }
+}
+
 @media only screen and (max-width: 600px)  {
     .navContainer {
         display: none;
@@ -440,6 +455,26 @@ body {
     }
 }
 
+@media screen and (max-width: 992px) {
+    .innerHeroTop {
+        height: fit-content;
+        flex-direction: column;
+        padding: 0 1.8em;
+    }
+
+    .innerHeroTop > div {
+        width: fit-content;
+        padding: 0 45px;
+    }
+
+    .measuresContent {
+        margin: 0 2em !important;
+    }
+
+    .innerHeroContainer {
+        width: 100% !important;
+    }
+}
 
 
 
@@ -592,6 +627,39 @@ body {
     }
 }
 
+@media screen and (max-width: 1150px) {
+    .mainInfoSection {
+        width: 100%;
+        flex-direction: column;
+        height: fit-content;
+        margin: 2em 0;
+
+        align-items: center;
+    }
+
+    .infoLeft {
+        padding: 0;
+        width: 85%;
+        display: flex;
+        justify-content: center;
+        align-items: start;
+    }
+
+    .infoRight {
+        width: 100%;
+    }
+
+
+    .rightTop,
+    .rightBottom {
+        width: 77%;
+        padding: 2em 3em;
+    }
+
+    .infoVideo {
+        width: 100%;
+    }
+}
 
 
 
@@ -681,7 +749,29 @@ body {
     }
 }
 
+@media screen and (max-width: 980px) {
+    .principalInfoSection {
+        height: fit-content;
+    }
 
+    .principalInnerContainer {
+        flex-direction: column;
+    }
+
+    .principalInnerContainer > div {
+        width: 100%;
+        margin-bottom: 4em;
+    }
+
+    .principalInnerContainer > div:nth-child(1) {
+        margin-top: 4em;
+    }
+
+    .innerLeftImage {
+        width: 100% !important;
+        height: auto !important;
+    }
+}
 
 
 
@@ -858,6 +948,28 @@ body {
 
 }
 
+@media screen and (max-width: 980px) {
+    .footerContainer {
+
+    }
+
+    .footerInnerContainer {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .footerInnerContainer > div {
+        width: 100%;
+    }
+
+    .footerSocial {
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 3em;
+    }
+}
+
 
 /* about page css */