Задать вопрос
@Keltor
Пока никто

Почему на телефоне обрезается верхняя часть страницы?

Почему на телфоне обрезается вот так:
Скрин с телефона
5b58b5f211042420222125.jpeg

На вкрапления тегов внимание не обращайте, они работают правильно
Код
<!DOCTYPE html>
<html lang="en">
<html>
    <head>

        <title>Регистрация</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        {% load static %}
        <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}">
        <link rel="stylesheet" href="{% static 'css/stylelogin.css' %}">
    </head>
    <body>

        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-7">
                    <h1 class="text-center"><a class="href" href="{% url 'index' %}">#ЕШЬУДОБНО</a>. Регистрация</h1>
                    <p class="lead">Пожалуйста, введите данные для регистрации:</p>
                    <form id="contact-form" method='POST' class="form-signin post-form">{% csrf_token %}

                        <div class="controls">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_username">Имя</label>
                                        <input id="form_name" type="text" name="first_name" class="form-control" placeholder="Пожалуйста, введите ваше имя" required="required" data-error="Firstname is required." maxlength="100"  id="id_first_name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_username">Фамилия</label>
                                        <input id="form_lastname" type="text" name="last_name" class="form-control" placeholder="Пожалуйста, введите вашу фамилию" required="required" data-error="Lastname is required." maxlength="100" id="id_last_name">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="id_username">Логин</label>
                                        <input id="form_name" type="text" name="username" maxlength="100" id="id_username" class="form-control" placeholder="Логин - минимум 6 символов латиницей" required="required" data-error="Firstname is required.">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                     <div class="form-group">
                                        <label for="id_email">Электронная почта</label>
                                        <input id="form_name" type="email" name="email" class="form-control" placeholder="Введите вашу почту" required="required" data-error="Firstname is required." id="id_email">
                                    </div>
                                </div>
                            </div>
                            <div class="row end">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_password">Пароль</label>
                                        <input id="id_password1" type="password" name="password1" class="form-control" placeholder="Пароль - от 6 символов латиницей" required="required" data-error="Firstname is required.">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_password">Повторите пароль</label>
                                        <input id="id_password2" type="password" name="password2" class="form-control" placeholder="Пожалуйста, повторите пароль" required="required" data-error="Firstname is required.">
                                    </div>
                                </div>
                            </div>

                            {% if error %}
                            <ul class="messages">
                                <li class="{{ error }}">{{ error }}</li>
                            </ul>
                            {% endif %}

                            <div class="row">

                                <div class="col-md-12">
                                    <button class="btn btn-lg btn-primary btn-block" type="submit">Зарегистрироваться</button>
                                </div>

                            </div>
                            <p>Нажимая "Зарегистрироваться", вы соглашаетесь с <a href="{% url 'confidencial'%}">политикой конфиденциальности</a></p>
                            
                        </div>

                    </form>

                </div>

            </div> 

        </div>
    </body>
</html>
  • Вопрос задан
  • 237 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
@tyzberd
уберите у body
align-items: center;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@TeslaGogol
это сам браузер 'обрезает' вверх, скрольни вниз и адерсная строка должна убраться или дай padding-top обертке страницы
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы