1

Referring this Bootstrap template.

When you make the screen short in height, the top part disappears. See this image for demo. It disappears in the sense that it cannot be seen, even scrolling to the top doesn't help. Can someone explain why is this happening and how can this behavior be changed so that the whole page remains accessible even when the screen is short?

Sumit Ghosh
  • 1,033
  • 10
  • 29

2 Answers2

3

add max-height:100%; to.form-signin

.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
max-height: 100%;
}
Bart
  • 527
  • 1
  • 7
  • 16
0

It's caused by a flexbox centering issue explained here.

The solution is to simply use my-auto on the form (auto vertical margins).

<form class="form-signin my-auto">
    ...
</form>

demo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624