Is there a simple bit of CSS code to center the login view on the login page?
Hi @Joseph7, below is a slice of CSS I use to center the login view in Classic apps.
Hope it’s useful!
/* LOGIN VIEW FORMATTING
---------------------------------------------------------------------------------------------------- */
.kn-scene:has(.kn-login), #knack-reset-pass { max-width: 400px !important; margin-left: auto !important; margin-right: auto !important; text-align: center; } /* Set max width for login views */
.kn-login-form { max-width: 100%; } /* Increase login form width */
.kn-login .column.is-half, #knack-reset-pass .column.is-half { width: 100%; } /* Widen inputs in login forms */
.kn-login .kn-button[type="submit"], #knack-reset-pass .kn-button[type="submit"] { width: 100%; } /* Widen submit button in login forms */
Hi @Joseph7, I’ve DM’ed you for further diagnosis.
I’d love to know the “further diagnosis” also, what change is made so that the view is not full width?
Try this, hope it will work:
/* LOGIN VIEW FORMATTING */
.kn-scene:has(.kn-login),
#knack-reset-pass {
max-width: 420px;
margin: 60px auto;
padding: 0 20px;
}
.kn-login-form {
width: 100%;
}
.kn-login .column,
.kn-login .column.is-half,
#knack-reset-pass .column,
#knack-reset-pass .column.is-half {
width: 100%;
}
.kn-login .kn-button[type=“submit”],
#knack-reset-pass .kn-button[type=“submit”] {
width: 100%;
}
Was hoping to fix this one day also.
I noticed it is to do with whether your site is set to Full Width or Max Width. Max Width works like Stephen’s example. If in Full Width you get the extended one.
The problem I have is the logo on top of the login is not centering, and I am not programmy enough to figure that out.
Adrian, do you just have the logo as a picture in a rich text view? You should be able to just select it in the rich text view in the builder and use the alignment button to set it to center. It will create HTML that centers the content - in my case it looks like this in the builder:
and with appropriate CSS to center the login form like this in the live app:
and the CSS I use to centre the login fields is:
/* ============================
RAIDDAR Login Screen Styling
============================ */
/* Cap the login form column at a sensible width
and let it size to that cap rather than
stretching full-width */
#view_1136 .column.is-half {
width: 100% !important;
max-width: 350px !important;
flex: 0 0 auto !important;
}
/* Centers the capped-width column within its row */
#view_1136 .columns {
justify-content: center !important;
}
Its not perfectly centered, but I actually like the login fields and button being left justified so i havent wanted to change that,
The logo is the one used in the Design menu for the App, so is at the top of every page.
Ah, gotcha - you mean the one that is sitting top left hand corner. I dont know how to centre that - thats usually where my menu is …
@Adrian_vD was correct about the max width, I overlooked that.
I have updated my CSS snippet in the original response by including !important against the max-width, margin-left and margin-right attributes. This is now compatible with max width and full width apps.
@Adrian_vD, there is a native setting to center the logo if that helps?
