Chane browser sync task to proxy in the backend from the server and also serve the local files. Fixed some styling issues with the images and buttons

src/css/main.css

@@ -31,6 +31,10 @@
     --headingFS: 1.5rem;
 }
 
+*{
+    box-sizing: border-box;
+}
+
 /**** Media Queries *****/
 
 @media screen and (max-width: 90em) {
@@ -254,7 +258,6 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        padding: 0;
     }
 
     section#projects .mainProj {
@@ -265,12 +268,7 @@
     }
 
     section#projects .mainProj img {
-        padding-right: 1em;
-        gap: 1em;
-    }
-
-    section#projects .mainProj, section#projects .otherProj {
-        align-items: unset;
+        padding: 0 1em;
     }
 
     section#projects .mainProj .flexRow {
@@ -283,6 +281,33 @@
         justify-content: center;
         align-items: center;
     }
+
+    section#projects .otherProj {
+        width: 100%;
+    }
+
+    section#projects .otherProj .btn{
+        width: 10em;
+        text-align: center;
+    }
+
+    section#projects .otherProj > div .oProjItem, section#projects .otherProj > div .oProjItem:nth-child(2) {
+        flex-direction: column;
+    }
+
+    section#projects .oProjItem .flexCol div:nth-child(2) {
+        justify-content: center;
+        margin-left: 0;
+        margin-bottom: 1em;
+    }
+
+    section#projects .otherProj > a {
+        margin-left: 3em;
+        margin-right: 3em;
+        text-align: center;
+
+    }
+
 }
 
 @media screen and (max-width: 55em) {
@@ -333,4 +358,16 @@
         padding: 0.1em 1em;
     }
 
+    /**** Projects Styles ***/
+
+    section#projects .mainProj .flexCol {
+        flex-direction: column;
+    }
+
+    section#projects .oProjItem .flexCol div:nth-child(2) {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
 }

src/css/projects.css

@@ -79,7 +79,9 @@ section#projects .otherProj > div .oProjItem:nth-child(2) {
 }
 
 section#projects .otherProj .oProjItem img {
-    max-width: 10rem;
+    max-width: 30rem;
+    width: 100%;
+    padding: 0 1em;
 }
 
 section#projects .oProjItem .flexCol div:nth-child(2) {

src/css/templateStyles.css

@@ -40,6 +40,7 @@ a.btn, form input[type="submit"] {
     border-radius: 0.625em;
     border: 0.3215em solid var(--primaryDefault);
     color: #FFFFFF;
+    text-align: center;
 }
 
 a.btn:hover {

src/index.html

@@ -137,6 +137,7 @@
                 <a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View More</a>
             </div>
         </section>
+
         <section id="contact">
             <div id="findme">
                 <h1>find me</h1>
@@ -178,6 +179,7 @@
                 </form>
             </div>
         </section>
+
         <footer class="flexRow">
             <p>&copy; 2021 Rohit Pai all rights reserved</p>
             <button class="goBackToTop"></button>