The signin and signup forms are not responsive in terms of background image

[vakasapu]

For example: The normal view of the signin page:

The signin page for iPad:

[zoltanszogyenyi]

@vakasapu the problem here is that there is not enough space to show the whole illustration on smaller screens. Or if we scale it down the illustrations will become too small to look good. A solution would be to hide the illustration altogether for screens smaller than tablets for instance.

[zoltanszogyenyi]

@vakasapu until v1.1 comes out, you can do the following changes to fix the situation:

1. In the front.js file update the xl breakpoint value from 1140 to 1200:

var breakpoints = {
        sm: 540,
        md: 720,
        lg: 960,
        xl: 1200
};

2. For the sign-in-illustration.html and sign-up-illustration.html pages update the data attribute that adds the background image like this:

<div class="row justify-content-center form-bg-image" data-background-xl="../assets/img/illustrations/signin.svg">

So add an extra -xl to the data-background="..." attribute. What this does is that it only will add the background image for larger screens, hiding the background image for smaller devices.

3. Add the following code anywhere in the front.js javascript file:

if ($(document).width() >= breakpoints.xl) {
        $('[data-background-xl]').each(function () {
            $(this).css('background-image', 'url(' + $(this).attr('data-background-xl') + ')');
        });
}

So what this fix does is that it hides the illustration for devices where the screen is so small that the image does not look good anymore.

[zoltanszogyenyi]

Fixed in version 1.1.