@media (min-width: 801px){ * { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; } .loginContent { display: flex; flex-direction: row; position: relative; justify-content: center; align-items: center; background-color: #404040; height: 100vh; } .loginLabel { display: flex; flex-direction: row; justify-content: end; width: 22vw; border: solid; border-radius: 1vw; } .loginLabel input[type="text"]{ height: 2rem; width: 20vw; border-radius: 10px; margin: 1vw 1vw 0; } .loginLabel input[type="password"]{ height: 2rem; width: 20vw; border-radius: 10px; margin: 1vw 1vw 0; } .loginLabel input[type="submit"]{ position: relative; left: 10vw; height: 2rem; width: 10.25vw; border-radius: 10px; margin: 1vw; } } @media (max-width: 800px){ * { font-family: Arial, Helvetica, sans-serif; font-size: 1.3rem; margin: 0; padding: 0; } .loginContent { display: flex; flex-direction: row; position: relative; justify-content: center; align-items: center; background-color: #404040; height: 100vh; } .loginLabel { display: flex; flex-direction: row; justify-content: end; width: 66vw; border: solid; border-radius: 1vw; } .loginLabel input[type="text"]{ height: 2rem; width: 60vw; border-radius: 10px; margin: 2vw 3vw 0; } .loginLabel input[type="password"]{ height: 2rem; width: 60vw; border-radius: 10px; margin: 1vw 3vw 0; } .loginLabel input[type="submit"]{ position: relative; left: 30vw; height: 2rem; width: 30.75vw; border-radius: 10px; margin: 1vw 3vw 2vw; } }