Make custom Keycloak theme responsive

Description

The login screen of the custom Keycloak theme archlinux is not responsive. This means the Arch Linux logo and background do not properly scale as the window is being resized resulting in bad experience on smaller screens such as mobile devices.

Summary

The custom login CSS file was modified to modify the dimensions as the screen size changes setting the minimum threshold to the same value the default Keycloak theme does.

Breakdown

• Make the login screen background and logo scalable (responsive)

Test Environment

• Ungoogled Chromium normal window resizing
• Chrome web developer device emulation mode

Demo

simplescreenrecorder-2020-08-29_15.26.35

simplescreenrecorder-2020-08-29_15.37.51

Before (Wide)

After (Wide)

Before (Mobile)

After (Mobile)