Kevin Powell - Community•8mo ago

responsive login form with flex

I am trying to create a login form for my university project. But unfortunately when I try it in dev-tools it looks fine, but when I try to open it on my phone, it does not look like it should. Any ideas? You can look at the site here: https://32chnb9g-4200.euw.devtunnels.ms/#/login Why is my form overflowing when it does not need to?

GitHub

Build software better, together

GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

9 Replies

EIO•8mo ago

use 100svh for your 100% height instead of 100vh BTW, you didn't specify How it should look My response is solely in respect to the overflow part of your question.

raphiOP•8mo ago

the first screenshot from the dev-tools is the way it should look like on the phone i changed it now to 100svh but this does not look right either

EIO•8mo ago

Are you auto-centralising the form or you gave some margin/padding at the top to push the content down? Also, share the code if you can

raphiOP•8mo ago

I'll try to provide the code.. give me a second

raphiOP•8mo ago

hopefully it works without the backend: https://github.com/raphi-0901/login-sample

GitHub

GitHub - raphi-0901/login-sample

Contribute to raphi-0901/login-sample development by creating an account on GitHub.

EIO•8mo ago

<div class="min-h-[100svh] bg-background flex flex-col justify-between">
  <div class="flex-1 grid mt-[4.5rem]">
    <app-header></app-header>
    <div class="grid grid-container">
      <router-outlet class="absolute"></router-outlet>
    </div>
  </div>
  <app-footer></app-footer>
</div>

<div class="min-h-[100svh] bg-background flex flex-col justify-between">
  <div class="flex-1 grid mt-[4.5rem]">
    <app-header></app-header>
    <div class="grid grid-container">
      <router-outlet class="absolute"></router-outlet>
    </div>
  </div>
  <app-footer></app-footer>
</div>

In your src/app/app.component.html file, take off the top margin (mt-[4.5rem]) and centralise the login <div /> automatically, using flex or grid

raphiOP•8mo ago

thanks for your input. the margin-top was for the fixed navigation, so the content is not hidden. If I try, what you said I unfortunately get basically the same behavior as before. this is what it looks like now: I pushed my changes I just tried to visualize it.. I have no clue why the login part is bigger than the rest. Also this just happens on mobile

EIO•8mo ago

I am confused. Was it what you did in the first picture that you pushed and is showing up as the second picture?

raphiOP•8mo ago

No, i did not push the last image.. I just tried to figure out which element causes this overflowing The last commit should be the second last image

Gaming

Programming

responsive login form with flex

Did you find this page helpful?