640px보다 작은 화면에서 로그인 화면이 가운데 정렬되지 않음

제품 지원
1

사이트의 모바일 로그인이 가운데 정렬이 아니라 왼쪽 정렬로 표시됩니다. 마진을 수동으로 조정해 보았지만, 이 때문에 메인 페이지에도 영향이 생겼습니다.

인스펙터에서 테스트해 본 결과, 640px이 기준점임을 발견했습니다. 639px에서는

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

이

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

으로 바뀝니다.

다른 페이지의 표시 방식에 영향을 주지 않고 모바일에서 로그인 창을 가운데 정렬로 유지하려면 어떻게 해야 하나요?

2

어떻게 하신 건지 공유해 주실 수 있을까요? 그리고 예상대로 작동하지 않는 뷰의 스크린샷도 함께 올려주시면 좋겠습니다. 감사합니다!

3

문제된 페이지의 몇 가지 스크린샷을 첨부합니다. (비공개 사이트이므로 실제 로그인 UI는 흐리게 처리했습니다)

image
image3834×1845 464 KB

image
image3834×1874 475 KB

지난주에 일이 있어서 구체적인 내용은 기억나지 않지만, 위에서 보이는 흰색 상자인

에 왼쪽 여백(left margin)을 추가한 것 같습니다.

또한 폭이 640px 미만일 때

아래에 <div class="card-cloak hidden>
줄이 표시되는 것도 확인했습니다.

image
image1496×1741 289 KB

4

여기에는 #main-outlet의 폭을 제한하는 CSS 규칙이 있는 것 같습니다. 사용자 정의 테마에 있는 것으로 추정됩니다. 호라이즌을 사용할 때(이것은 호라이즌을 기반으로 하고 있죠?) 같은 문제가 보이지 않습니다.

5

아, 맞다!

Horizon을 사용 중인데, 언급하는 걸 깜빡했네요. 사이드바를 살짝 밀어서 화면 가장자리에 붙지 않도록 하려고 main-outlet 너비를 제한하고 있었습니다.

해당 변경 사항을 되돌렸더니 이제 로그인 화면이 원래처럼 화면의 100%를 차지합니다. 이제 사이드바가 화면 가장자리에 붙어야 하지만, 그건 그리 큰 문제가 아닙니다.

감사합니다!