made home page ui responsive (#765)

* made home page ui responsive

* decreased gap

* single column posts responsive

* padding fix in profile

* home-ui responsive

* fixed bottom margin

* fixed home responsiveness

* profile reduced media queries and sidebar margin fix

* removed extra bottom margin of posts

* bottom margin fix

---------

Co-authored-by: Narayan soni <narayansoni854@gmail.com>

src/App.jsx

@@ -260,6 +260,7 @@ function App() {
                       <SideBar />
                     </ErrorBoundary>
                     <div
+                      className="home-posts-container"
                       style={
                         !loadingPosts
                           ? {}

src/components/SideBar/index.css

@@ -40,7 +40,7 @@
 }
 
 #sidebar-home-link {
-  margin-top: 6.5em;
+  margin-top: 6.2em;
 }
 
 .sidebar-links li:hover {

src/index.css

@@ -104,8 +104,6 @@ input:focus {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 20px;
-  padding-top: 5.5em;
 }
 
 .rowConvert {
@@ -123,28 +121,28 @@ input:focus {
   transform: scale(1.04);
 }
 
-@media only screen and (min-width: 1200px) {
-  .app__posts {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2rem;
-    justify-content: center;
+@media only screen and (max-width: 1200px) {
+  .app__posts,
+  .home-posts-container .app_posts_column,
+  .home-posts-container .app_posts {
+    padding: 5.5em 15px 20px 9vw;
   }
 }
-
-@media only screen and (max-width: 1200px) {
-  .app__posts {
-    padding: 120px;
+@media only screen and (max-width: 800px) {
+  .app__posts,
+  .home-posts-container .app_posts_column {
+    padding: 5.5em 15px 5.5em 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1em;
   }
 }
 
 @media only screen and (max-width: 900px) {
   .rowConvert {
     display: none;
   }
-  .app__posts {
-    padding-left: 20%;
-  }
 }
 @media only screen and (max-width: 700px) {
   .app__posts {
@@ -249,9 +247,8 @@ input:focus {
   .app__newpost__button {
     left: -6%;
   }
-  .app__posts {
-    padding-left: 10%;
-    width: 95%;
+  .home-posts-container .app_posts_column {
+    padding: 5.5em 15px 5em 15px;
   }
 }
 
@@ -260,7 +257,6 @@ input:focus {
   .scrollTop {
     left: 45.6%;
   }
-
   .app__newpost__button {
     left: -4.8%;
   }
@@ -298,6 +294,12 @@ input:focus {
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
+  .app__posts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: center;
+  }
   .scrollTop {
     left: 47.7%;
   }
@@ -309,6 +311,9 @@ input:focus {
   .app__newpost__button {
     left: -1.2%;
   }
+  .home-posts-container .app_posts_column {
+    padding: 5.5em 20px 20px 17vw;
+  }
 }
 
 .darkmode-toggle {

src/pages/Profile/index.css

@@ -25,9 +25,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 50px;
-  margin-bottom: 0;
 }
+.feed-main-container .app__posts {padding: 2em 10px 20px 0;}
 
 .img-save:hover {
   color: var(--btn-color);
@@ -40,13 +39,6 @@
     width: 95%;
     padding: 30px 0;
   }
-  .feed-main-container {
-    margin-top: 0;
-  }
-  .feed-main-container .app__posts {
-    padding: 10px;
-    margin: 10% auto;
-  }
   .feed-main-container .app__posts .post {
     margin: auto;
     margin-bottom: 20px;
@@ -75,30 +67,24 @@
     width: 140px;
     height: 140px;
   }
-  .app__posts {
-    padding-top: 0;
-  }
 }
-@media screen and (min-width: 768px) {
-  .outer-profile-box,
-  .feed-main-container {
-    width: calc(100% - 16vw);
-  }
-  .feed-main-container {
-    margin: 30px auto;
-  }
+
+@media screen and (max-width: 800px) {
+  .outer-profile-box {width: calc(100% - 16vw);}
   .feed-main-container .app__posts {
-    padding: 10px 10px 10px 8vw;
+    padding: 2em 10px 5.5em 10px;
   }
 }
+
+@media screen and (min-width: 800px) and (max-width: 1200px) {
+  .feed-main-container .app__posts {padding-left: 9vw;}
+}
+
 @media screen and (min-width: 1200px) {
-  .outer-profile-box,
-  .feed-main-container {
+  .feed-main-container .app__posts {padding-left: 17vw;}
+  .outer-profile-box {
     width: calc(100% - 34vw);
   }
-  .feed-main-container {
-    margin: 50px auto;
-  }
   .profile-pic-container {
     width: 180px;
     height: 180px;