サイトのモバイルログインが中央揃えではなく左揃えになっています。手動でマージンを調整しようとしましたが、メインページにも影響が出てしまいました。
インスペクターでテストしたところ、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
になります。
他のページの表示に影響を与えることなく、モバイルでログインウィンドウを中央揃えに保つにはどうすればよいですか？
どのように調整したか教えていただけますか？また、期待どおりに機能していない表示のスクリーンショットも添付していただけると幸いです。よろしくお願いします！
問題のページのスクリーンショットをいくつかご紹介します。（プライベートサイトのため、実際のログインUIは空白にしています）
先週のことなので、以前これを修正しようとして行った具体的なことは覚えていませんが、上記の白いボックスである <div id=”main-outlet”> に左マージンを追加したと思います。
また、幅が640px未満の場合、<div id=”main-outlet”> の下に <div class=”card-cloak hidden”></div> という行が表示されることにも気づきました。
#main-outlet の幅を制限する CSS ルールがあると思います。カスタムテーマにあるのではないでしょうか。Horizon (これは Horizon ベースですよね？) を使用すると、同じ問題は発生しません。
ああ、そうですね！
Horizonを使用しています。言い忘れてすみません。サイドバーを画面の端に寄せないように、メインのアウトレットの幅を制限していました。
これらの変更を元に戻したので、ログイン画面は本来あるべきように画面の100％を占めるようになりました。サイドバーは画面の端に触れる必要がありますが、それはそれほど悪い問題ではありません。
ありがとうございます！