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

Support
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

1 Like
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!

1 Like