如何解决移动布局问题

Question

这是我的应用程序link collegefellow.social/users/login

我的代码库 github（登录页面=> /views/login.ejs）

布局问题 Image here

Answer 1

将max-width: 100%添加到.container:

.container {
    border-radius: 10px;
    background-color: #0811202d;
    text-align: center;
    margin: auto;
    padding-bottom: 10px;
    width: 400px;

    max-width: 100%; /*add this it*/
}

并从 .row 中删除 width: 400px:

.row {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    height: 90px;

    /*width: 400px;*/ /*remove this it*/

    background-color: #D03737;
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

如何解决移动布局问题

how to fix mobile layout issue

html

css

forms

layout