diff --git a/start_page/src/Header.js b/start_page/src/Header.js
index c0a4122..62d1ec9 100644
--- 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 = () => {
RecordIt
{isMobileOrTablet && !auth?.user && !dashboardRego() &&
-
-
- Menu
-
-
-
- LogIn
- SignUp
- About
-
-
+
+
+
+ Menu
+
+
+
+ LogIn
+ SignUp
+ About
+
+
+
}
{isMobileOrTablet && !auth?.user && dashboardRego() &&
+
Menu
@@ -80,9 +83,11 @@ const Header = () => {
About
+
}
{isMobileOrTablet && auth?.user && !dashboardRego() &&
+
Menu
@@ -93,9 +98,11 @@ const Header = () => {
About
+
}
{isMobileOrTablet && auth?.user && dashboardRego() &&
+
Menu
@@ -106,6 +113,7 @@ const Header = () => {
About
+
}
{isLaptop && dashboardRego() &&
diff --git a/start_page/src/index.css b/start_page/src/index.css
index 6282258..938bca1 100644
--- 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,7 +65,7 @@ body {
#LogOut{
position: relative;
- top: 4vh;
+ top: -3vh;
left: 90vw;
height: 4vh;
width: 7vw;
@@ -73,25 +73,22 @@ body {
#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){
diff --git a/start_page/src/start_page/StartPage.css b/start_page/src/start_page/StartPage.css
index f2f61c1..912f14a 100644
--- a/start_page/src/start_page/StartPage.css
+++ b/start_page/src/start_page/StartPage.css
@@ -102,6 +102,7 @@
position: absolute;
width: 33.33vw;
height: 100%;
+
}
.bottomh2{
@@ -137,6 +138,7 @@ span{
text-align: center;
display: block;
color: #000000;
+
}
@@ -156,7 +158,7 @@ span{
font-style: normal;
font-weight: 400;
- font-size: 1.2rem;
+ font-size: 1.2vw;
line-height: 1.5em;
width: 20vw;
@@ -200,7 +202,7 @@ br{
#stitle{
width: 100%;
- font-size: 1.5rem;
+ font-size: 1.5vw;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
@@ -214,15 +216,14 @@ br{
@media all
and (min-device-width: 768px)
- and (max-device-width: 1024px)
- and (min-height:1000px)
+ and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
#welcome{
position: absolute;
- top: 4vh;
+ top: 2vh;
left: 25vw;
width: 20vw;
height: fit-content;
@@ -253,13 +254,13 @@ br{
position: absolute;
top:40vh;
- left: 20vw;
+ left: 21vw;
width: 30vw;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
- font-size: 3vw;
+ font-size: 2vw;
line-height: 36px;
text-align: center;
@@ -286,96 +287,48 @@ br{
.RegisterNow>Button{
width: 100%;
height: 100%;
- font-size: 2vw;
+ font-size: 1.5vw;
}
-
-
-}
+ #imgcontainers{
+ position: absolute;
+ top: 3vh;
+ width: 3vw;
+ height: 3vh;
+
+ }
+ #stitle{
+ font-size: 2vw;
+ position: relative;
+ top: 7vh;
+ }
-@media all and (max-width:800px){
- .BottomSection{
-
-
- position: relative;
- width: 100%;
- min-height: 40vh;
- height: fit-content;
- top: 35vh;
- display: flex;
- justify-content: space-evenly;
- background: #FDF4C9;
- }
- .bottomh1{
- left: 0;
-
- position: absolute;
- width: 33.33vw;
- height: 100%;
- }
- .bottomh2{
-
- left: 33.33vw;
- position: absolute;
- width: 33.33vw;
- height: 100%;
- }
- .bottomh3{
-
- left: 66.66vw;
- position: absolute;
- width: 33vw;
- height: 100%;
- }
-
-
+ #small {
-#small {
-
- position: absolute;
- top: 15vh;
- left: 0vw;
- margin: auto;
- height: fit-content;
-
- font-family: 'Inter';
- font-style: normal;
- font-weight: 400;
-
- font-size: 1.0rem;
- line-height: 1.5em;
+ position: relative;
+ top: 7vh;
+ margin: auto;
+ height: fit-content;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+
+ font-size: 2vw;
+
+
+
+ }
+
+
- width: 100%;
- text-align: center;
- color: #000000;
-
-}
-
-#stitle{
-
- width: 100%;
- font-size: 1.3rem;
- font-family: 'Inter';
- font-style: normal;
- font-weight: 600;
- text-align: center;
- position: relative;
- top: 6vh;
}
-
- br{
- display: block;
- margin: 10px 0;
-
- }
-
-}
@media all and (max-width:450px){