Почему сьедается экран?

Question

Павел @Pavel2021

Почему сьедается экран?

Добрый день. Учусь верстать и наткнулся на такую проблему:
при уменьшении разрешения экрана (менее 400 px) (по вертикальной оси) через инспектор кода в Chrome сьедается часть экрана белым фоном.
Помогите разобраться. Спасибо!

Вопрос задан более трёх лет назад
197 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

Комментировать

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Павел @Pavel2021 Автор вопроса

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MiniProfilePage</title>
    <link rel="stylesheet" href="style/assets/stylesheets/main.css">
    <script src="https://kit.fontawesome.com/54a2b0c1c6.js" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <div class="intro">
            <div class="container">
                <div class="profile-set">
                    <div class="profile">
                        <h1>Mini Profile</h1>
                        <p>simple parallax template</p>
                    </div>
                </div>
            </div>
            <div class="background">
                <div class="container">
                    <div class="col">
                        <div class="welcome">
                            <h3>Welcome to Mini Profile Page</h3>
                            <p>This is Bootstrap v4.3.1 parallax layout for you. Credit goes to Pexels for 2 background images. In odio sapien, commodo id ullamcorper ac, dignissim at sapien. Nullam leo massa, vaius ac massa et, tincidunt imperdiet turpis.</p>
                        </div>
                        <div class="icon">
                            <a class="icon-item" href="#">
                                <i class="far fa-address-card"></i>
                            </a>
                            <p>Please spread a word about templatemo website. Anyone can download free Bootstrap CSS templates.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </header>

</body>

</html>

CSS:

/*Делаем сброс CSS*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* Открываем блочную модель*/


*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    width: 100%;
}


/* Intro*/



.intro {
    background-image: url("../images/1.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border: 4px solid red;
    width: 100%;
}



.container {
    margin: 0 auto;
    max-width:  1230px;
    width: 100%;

}

.profile-set {
    position: relative;
    height: 700px;
    width: 100%;
}

.profile {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 60px 100px;
    text-align: center;
    position: absolute;
    top: 200px;
    right: 50px;

}

.profile h1 {
    font-size: 60px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    padding: 20px 30px;
    opacity: 1;
}

.profile p {
    font-size: 22px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    padding: 10px 30px;
}

/* Welcome*/




.background {
    background: rgb(255, 255, 255, 0.8);
}

.col {
    display: flex;
}

.welcome {
    color: black;
    flex: 3;
    padding: 80px 50px 80px 50px;
}

.welcome h3 {
    font-size: 32px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #6b6b6b;
    padding-bottom: 50px;
}

.welcome p {
    font-size: 18px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.8;
}

.icon {
    flex: 2;
    color: white;
    background-color: #986665;
    text-align: center;
    padding: 60px 40px 70px 40px;
}

.icon i {
    font-size: 80px;
    color: white;
    padding: 50px 0;
}

.icon p {
    font-size: 18px;
    line-height: 1.8;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-align: left;
}

Написано более трёх лет назад

Ваш ответ на вопрос