overflow on mobile fixed

Author: Derek Roode

react-app/src/App.js

@@ -21,13 +21,14 @@ import ProgressPhotos from "./components/ProgressPhotos/ProgressPhotos";
 import About from "./components/About/About";
 import ProgressPhotoIndividual from "./components/ProgressPhotoIndividual/ProgressPhotoIndividual";
 import Login from "./components/Pages/Login/Login";
+import Main from "./components/Pages/Main/Main";
 
 function App() {
   const [authenticated, setAuthenticated] = useState(true);
   const dispatch = useDispatch();
   const [loaded, setLoaded] = useState(false);
   const sessionUser = useSelector((state) => state.session.user);
-  console.log('sessionUser----',sessionUser);
+  console.log("sessionUser----", sessionUser);
 
   useEffect(() => {
     (async () => {
@@ -49,17 +50,14 @@ function App() {
         <BrowserRouter>
           <Switch>
             <Route path="/welcome" exact={true}>
-              {/* <WelcomePage /> */}
               <Login />
             </Route>
-
             <>
               <NavBar />
-              
               <ProtectedRoute path="/" exact={true}>
-                <User />
+                <Main />
+                {/* <User /> */}
               </ProtectedRoute>
- 
               <Route path="/users" exact={true}>
                 <UsersList />
               </Route>

react-app/src/components/Atoms/Quote/Quote.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./Quote.module.css";
 
 function Quote() {

react-app/src/components/Atoms/Quote/Quote.module.css

@@ -4,4 +4,5 @@
   width: 100%;
   max-height: 80px;
   padding: 0 20px;
+  max-width: 90vw;
 }

react-app/src/components/Molecules/NavBarLinks/NavBarLinks.module.css

@@ -19,11 +19,11 @@
   .navBar_links_container{
     flex-direction: column;
   }
-
+  
   .navBar_links_container__mobile{
     display: flex;
   }
-
+  
   .navBar_links_container__desktop{
     display: none;
   }

react-app/src/components/Organisms/NavBar/NavBar.module.css

@@ -3,11 +3,11 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 0px 20px;
+  /* padding: 0px 20px; */
   background-color: black;
   margin-bottom: 15px;
   box-shadow: 0px 0px 10px 0px rgba(214, 9, 9, 0.75);
-  width: 100vw;
+  width: 100%;
 
 
 

react-app/src/components/Pages/Main/Main.js

@@ -1,9 +1,10 @@
 import React from 'react'
+import Quote from '../../Atoms/Quote/Quote'
 
 function Main() {
   return (
     <div>
-      
+      <Quote/>
     </div>
   )
 }

react-app/src/components/User/User.css

@@ -169,18 +169,3 @@ hr {
   width: 75%;
 }
 
-
-
-
-
-/* .user_container-header-right-links {
-  text-align: center;
-} */
-
-/* #links {
-  display: flex;
-  flex-direction: column;
-  height: 270px;
-  overflow-y: scroll;
-  width: 190px;
-} */

react-app/src/index.css

@@ -1,9 +1,9 @@
 /* TODO Add site wide styles */
 
-/* #root{
+#root{
   padding: 0px;
   margin: 0px;
-} */
+}
 
 body{
 
@@ -37,18 +37,12 @@ a {
 }
 
 
-#noPhone{
-  visibility:hidden;
-}
-
-
-@media only screen and (min-width: 100px) and (max-width: 675px) {
-  .user_container,
-  .navbar-container{
-    visibility: hidden;
-  }
 
-  #noPhone{
-    visibility:visible;
-  }
+/* disable scroll left to right on mobile */
+@media screen and (max-width: 600px) {
+  html,body{
+    overflow-x: hidden;
+    overflow-y: auto;
   }
+}
+