beginning responsive design, 1050px

src/App.css

@@ -132,12 +132,6 @@
   width: 90vw;
 }
 
-.about-the-app {
-  display: hidden;
-  flex-direction: column;
-  align-items: center;
-}
-
 .page-handling {
   display: inline-flex;
   flex-direction: row;
@@ -176,4 +170,55 @@
   margin-top: 5rem;
   position: relative;
   bottom: 6rem;
+}
+
+/* Media queries (tablet) */
+
+@media only screen and (max-width: 1050px) {
+  /* Navbar */
+
+  .navbar {
+    height: 4rem;
+  }
+
+  .nav-title {
+    font-size: 1rem;
+  }
+
+  .nav-searchbar {
+    width: 25rem;
+    right: 2rem;
+  }
+
+  /* Sidebar */
+
+  .sidebar-button {
+    height: 2.6rem;
+    width: 5rem;
+  }
+
+  .sidebar {
+    top: 4rem;
+  }
+
+  .sidebar-hidden {
+    top: 4rem;
+  }
+
+  /* Feed */
+
+  .content-container {
+    top: 4rem;
+  }
+
+  .page-handling {
+    height: 3rem;
+    padding: 0.5rem;
+  }
+
+  .page-handling button {
+    height: 2rem;
+    width: 2rem;
+    margin: 0 0.4rem;
+  }
 }

src/features/posts/Feed.js

@@ -161,7 +161,7 @@ export default function Feed() {
 
         <div className="page-handling" id="top-page-handling">
             <button className="decrement" onClick={handleDecrement}>-</button>
-            <p>Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}</p>
+            <p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
             <button className="increment" onClick={handleIncrement}>+</button>
         </div>
 
@@ -172,7 +172,7 @@ export default function Feed() {
 
         <div className="page-handling" id="bottom-page-handling">
             <button className="decrement" onClick={handleDecrement}>-</button>
-            <p>Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}</p>
+            <p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
             <button className="increment" onClick={handleIncrement}>+</button>
         </div>