Login Page overflow when browser is resize problem

At normal browser size the login page looks like this.


However when resized the login form flows out (sorry I do not know the best term for this) out of the background. Is there any way to fix this? Like the background (blue) filling the gap or any other approach available. 




Any suggestions will highly be appreciated.

Approaches made: added in background height: Fill; still no luck

Hi Penny!

You can try placing a Container in the BackgroundImage section of Layouts\LayoutLogin, then going to Container's Style Tab and then setting the Color to the desired background color and then setting the Height to a pixel value that exceeds the vertical pixel dimension of the screen resolution you're currently using.

Best regards,

Joseph Enriquez

Hello Penny,

Make that login layout height to auto instead of 100%

Replace this in your page,

.layout-login{

height: auto;

}


If Auto doesnt work, try :

.layout-login{

height: 100vh;

}


https://css-tricks.com/fun-viewport-units/


Aravind M wrote:

Hello Penny,

Make that login layout height to auto instead of 100%

Replace this in your page,

.layout-login{

height: auto;

}


Good Day Sir Aravind,

The css worked however there is still the blank space at bottom. The login form fitted itself when resized. 

Thank you sir for your suggestion!


Penny wrote:

Aravind M wrote:

Hello Penny,

Make that login layout height to auto instead of 100%

Replace this in your page,

.layout-login{

height: auto;

}


Good Day Sir Aravind,

The css worked however there is still the blank space at bottom. The login form fitted itself when resized. 

Thank you sir for your suggestion!



can you please share the screenshot and mention where is the blank space.

Stefano Valente wrote:

If Auto doesnt work, try :

.layout-login{

height: 100vh;

}


https://css-tricks.com/fun-viewport-units/


Good Day Sir Stefano,


Out of curiosity, when is it better to use vh and %? 


its the overflow :)

.layout-login{

overflow-y: hidden

}

Penny wrote:

Stefano Valente wrote:

If Auto doesnt work, try :

.layout-login{

height: 100vh;

}


https://css-tricks.com/fun-viewport-units/


Good Day Sir Stefano,


Out of curiosity, when is it better to use vh and %? 



vh is always relative to your viewport. % is relative to the parent.