Login screen isn't centered on screens smaller than 640px

Product Support

AI-generated summary

The discussion addresses a login screen alignment issue on screens smaller than 640px. Jack_McCarthy reports that the mobile login is left-aligned instead of centered, and attempts to fix it via margin adjustments inadvertently affected the main page. After testing, they identify 640px as the cutoff point where the issue occurs. pmusaraj suggests the problem may stem from a CSS rule limiting the width of #main-outlet, which is likely in the Horizon theme. Jack_McCarthy confirms this, explaining that they were adjusting the #main-outlet width to reposition the sidebar, inadvertently causing the login screen misalignment. The issue is tied to theme-specific styling rather than a core bug.

1

The mobile login for my site is left-aligned instead of centered. I tried to manually adjust the margins but this affected the main page as well.

I was testing it in the inspector and found that 640px is the cutoff. At 639px

<html lang="en" class="text-size-normal anon touch discourse-touch desktop-view not-mobile-device" style="--powered-by-height: 0px;"> == $0

becomes

<html lang="en" class="text-size-normal anon touch discourse-touch mobile-view mobile-device" style="--powered-by-height: 0px;"> == $0

What can I do to keep the login window centered on mobile without affecting how other pages are displayed?

2

Can you share how you did this? And maybe include a screenshot of the view that isn’t working as expected? Thanks!

3

Here are some screenshots of the page in question. (I blanked out the actual login UI because it’s a private site)

image
image3834Ă—1845 464 KB

image
image3834Ă—1874 475 KB

I don’t remember the specifics of what I did to try and fix this before because it was last week but I believe I just added a left margin to

which is the white box you see above.

I also noticed that the line

appears under
when the width is less than 640px.

image
image1496Ă—1741 289 KB

4

I think there is a CSS rule here that limits the width of #main-outlet. I suspect it’s in your custom theme. When I use Horizon (this is based on Horizon, yes?), I don’t see the same issue.

5

Ahhh you’re right!

I am using Horizon, sorry I forgot to mention that. I was limiting the main-outlet width to make room to nudge the sidebar over so it wasn’t hugging the edge of the screen.

I reverted those changes so now the login screen takes up 100% of the screen like it’s supposed to. Sidebar has to touch the edge of the screen now but that’s not nearly as bad of an issue.

Thank you!