The Correct CSS to display none Login form

Tobi

I need help creating custom CSS to hide the standard login and sign-up forms. I am switching to the v17development/flarum-third-party-login-only extension. While the extension works, it leaves behind a large white empty space below Aoth. Could anyone help me with the correct css?

Flarum 1.8.19

Subarist

Maybe you could share a link to your forum or a screenshot of the login modal? That would make it much easier for the experts here to see exactly what's happening and point you in the right direction. 🙂

Tobi

Subarist This is what happens: when standard login forms are disabled, the grey background remains on the Google Login button correctly. But on mobile devices, this background is pushed too high, appearing at the very top of the screen. I want to center this grey background—which contains the Google Login button—directly in the middle of the viewport screen. Currently, mobile users cannot find the Third-party login buttons because the login popup opens in the center while the authentication buttons are stuck at the top. Moving them down to the center will make them clearly visible.

Tobi

Claude helped to redesign, i also found out i wont be needing an extension. Heres what i came up with

It happened while listening 🎶

Subarist

I don’t have third-party login enabled, but the CSS is roughly like this:

@media (max-width: 767.98px) {
.LogInModal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.LogInModal .Modal-content {
    width: 90%;
    height: auto;
    min-height: unset;
    margin: 0 !important;
    top: 25%;
}
}

Tobi

Subarist Yes, that approach makes sense. The flex positioning on .LogInModal definitely helps with getting the modal centered properly on mobile.

I’m still polishing mine though. I’ve already got it to the point I wanted visually, but I’m playing around with the structure and responsiveness to see if I can make it even cleaner rather than stopping at the first solution that works.

I’ve reached this stage so far — I’ll probably keep refining it and see where I can take it from here.