Add more responsiveness

AugustRushG · Nov 5, 2022 · 2b46299 · 2b46299
1 parent e65a0e5
commit 2b46299
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 148 deletions.
diff --git a/start_page/src/Header.js b/start_page/src/Header.js
@@ -25,8 +25,8 @@ const Header = () => {
     const navigate=useNavigate();
     const logOut=useLogOut();
 
-    const isMobileOrTablet = useMediaQuery({ query: '(max-width: 1000px)' })
-    const isLaptop = useMediaQuery({ query: '(min-width: 1000px)' })
+    const isMobileOrTablet = useMediaQuery({ query: '(max-width: 1024px)' })
+    const isLaptop = useMediaQuery({ query: '(min-width: 1024px)' })
 
 
 
@@ -56,20 +56,23 @@ const Header = () => {
         <Link to='/' style={{color:'black'}}><h1 className='RecordIt'>RecordIt</h1></Link>
 
         {isMobileOrTablet && !auth?.user && !dashboardRego() &&
-          <Dropdown id='dropdown' align="end">
-          <Dropdown.Toggle variant="warning" id="dropdown-basic">
-            Menu
-          </Dropdown.Toggle>
-
-          <Dropdown.Menu>
-            <Dropdown.Item href="/LogIn">LogIn</Dropdown.Item>
-            <Dropdown.Item href="/Register">SignUp</Dropdown.Item>
-            <Dropdown.Item href="/About">About</Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
+          <div className="dropDownContainer">
+            <Dropdown id='dropdown' align="end">
+            <Dropdown.Toggle variant="warning" id="dropdown-basic">
+              Menu
+            </Dropdown.Toggle>
+
+            <Dropdown.Menu>
+              <Dropdown.Item href="/LogIn">LogIn</Dropdown.Item>
+              <Dropdown.Item href="/Register">SignUp</Dropdown.Item>
+              <Dropdown.Item href="/About">About</Dropdown.Item>
+            </Dropdown.Menu>
+            </Dropdown>
+          </div>
         }
 
         {isMobileOrTablet && !auth?.user && dashboardRego() &&
+        <div className="dropDownContainer">
           <Dropdown id='dropdown' align="end">
           <Dropdown.Toggle variant="warning" id="dropdown-basic">
             Menu
@@ -80,9 +83,11 @@ const Header = () => {
             <Dropdown.Item href="/About">About</Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
+        </div>
         }
 
         {isMobileOrTablet && auth?.user && !dashboardRego() &&
+        <div className="dropDownContainer">
           <Dropdown id='dropdown' align="end">
           <Dropdown.Toggle variant="warning" id="dropdown-basic">
             Menu
@@ -93,9 +98,11 @@ const Header = () => {
             <Dropdown.Item href="/About">About</Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
+        </div>
         }
 
         {isMobileOrTablet && auth?.user && dashboardRego() &&
+        <div className="dropDownContainer">
           <Dropdown id='dropdown' align="end">
           <Dropdown.Toggle variant="warning" id="dropdown-basic">
             Menu
@@ -106,6 +113,7 @@ const Header = () => {
             <Dropdown.Item href="/About">About</Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
+        </div>
         }
 
         {isLaptop && dashboardRego() && 

diff --git a/start_page/src/index.css b/start_page/src/index.css
@@ -55,7 +55,7 @@ body {
 
   position: relative;
 
-  top: 4vh;
+  top: -3vh;
   height: 4vh;
   width: 6vw;
   left: 76vw;
@@ -65,33 +65,30 @@ body {
 
 #LogOut{
   position: relative;
-  top: 4vh;
+  top: -3vh;
   left: 90vw;
   height: 4vh;
   width: 7vw;
 }
 
 #dashboard{
   position: relative;
-  top: 4vh;
+  top: -3vh;
   left: 90vw;
   height: 4vh;
   width: 7vw;
 }
 
 
-
-
-
 .Header h1{
-  position: absolute;
+  position: relative;
   left: 2vw;
   top: 2vh;
 
   font-family: 'Allerta Stencil', sans-serif;
   font-weight: 400;
-  font-size: 250%;
-  line-height: 61px;
+  font-size: 3vw;
+
 
   width: 10vw;
 
@@ -132,73 +129,72 @@ button:active {
   margin-top: 5px;
 }
 
+.dropDownContainer{
+
+  position: absolute;
+  left: 85vw;
+  top: 1vh;
+
+
+  width: 5vw;
+  height: 9vh;
+
+}
+
 
-@media all and (min-width:1200px) {
+@media all and (min-width:1024px) {
 
 
   #LogIn,#SignUp,#About{
     font-size: 1vw;
   }
 
-}
-
-@media all and (max-width:1050px){
 
-.SignUp{
 
-  position: absolute;
-  width: 8vw;
-  right: 13.5vw;
-  top: 2.5vh;
-  margin-left: 1vw;
-
 
 }
 
-.LogIn,.Account{
-
-  position: absolute;
 
-  width: 8vw;
-
-  right: 23.5vw;
-  top: 2.5vh;
-  margin-left: 2vw;
 
-}
 
-.About{
+
+
+
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+
+
+.dropDownContainer{
+
   position: absolute;
-  width: 8vw;
-  right: 4vw;
+  left: 85vw;
   top: 2.5vh;
-  margin-left: 5vw;
+
+
+  width: 5vw;
+  height: 9vh;
 }
 
-#LogOut{
+.Header h1{
   position: absolute;
-  width: fit-content; 
-  height: 4.5vh;
-  right: 14vw;
-  top: 2.5vh;
-  margin: auto;
+  left: 2vw;
+  top: 1vh;
+
+  font-family: 'Allerta Stencil', sans-serif;
+  font-weight: 400;
+  font-size: 5vw;
 
-  font-family: 'Inter', sans-serif;
-  font-size: 100%;
+  width: 10vw;
+
   color: #000000;
-  text-align: center;
 
-}
+ 
 
-#dropdown{
-  position: absolute;
-  right: 5vw;
-  top: 2.5vh;
 }
 
-
-
-
 }
 
 @media all and (max-width:400px){