Fix: Responsivness

Author: 318097

src/App.scss

@@ -8,7 +8,8 @@
     display: flex;
     flex-direction: column;
     max-width: 1024px;
-    width: 100%;
+    width: 96%;
+    padding: 0 2%;
   }
 }
 
@@ -38,9 +39,6 @@ div.filters {
   display: flex;
   align-items: center;
   justify-content: center;
-  @media screen and (max-width: 480px) {
-    flex-direction: column;
-  }
 }
 
 code {

src/components/Header.js

@@ -31,6 +31,23 @@ const StyledHeader = styled.header`
     padding: 0px 12px 0 2px;
     border-radius: 20px;
   }
+  @media screen and (max-width: 600px) {
+    .logo {
+      position: relative;
+      top: 4px;
+      svg {
+        width: 80%;
+      }
+    }
+    .filters {
+      .search-input {
+        width: 100px !important;
+      }
+      .show-count {
+        display: none;
+      }
+    }
+  }
 `;
 
 const Header = ({ location, session, history, setSession }) => {
@@ -41,7 +58,7 @@ const Header = ({ location, session, history, setSession }) => {
 
   return (
     <StyledHeader>
-      <a onClick={() => history.push("/posts")}>
+      <a className="logo" onClick={() => history.push("/posts")}>
         <Logo />
       </a>
       {location.pathname === "/posts" && <Filters />}

src/components/posts/Filters.js

@@ -50,7 +50,7 @@ const Filters = ({ setFilter, filters, meta, tagList = [], postCount }) => {
       <Search
         size="small"
         allowClear
-        className="field-width"
+        className="field-width search-input"
         placeholder="Search..."
         defaultValue={search}
         onSearch={(value) => setFilter({ search: value })}
@@ -71,7 +71,7 @@ const Filters = ({ setFilter, filters, meta, tagList = [], postCount }) => {
         ))}
       </Select> */}
       {meta && (
-        <div>
+        <div className="show-count">
           Showing {postCount} of {meta.count} posts.
         </div>
       )}