0

В чем может быть проблема? Марджинов не нашёл, ширина фиксированная. Подскажите, пожалуйста.

* {
    margin: 0;
    padding: 0;
}

.top {
    position: relative;
    width: 1920px;
    height: 790px;
    background: #F4F4F4;

    .header {
        position: absolute;
        width: 1180px;
        height: 80px;
        top: 20px;
        left: 250px;
        background: #E73D66;
        border-radius: 90px;
        display: flex;
        list-style-type: none;
    }

    .logo {
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 40px;
    }

    .logo-2 {
        padding-top: 23px;
        padding-bottom: 24px;
        padding-left: 15px;
    }

    .pages {
        padding-left: 40px;
        padding-top: 30px;
        padding-bottom: 30px;
        height: 20px;
        font-family: 'rubik';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        text-transform: uppercase;
        color: #FFFFFF
    }

    .pages:nth-child(3) {
        padding-left: 141px;
    }

    .media {
        padding-left: 30px;
        padding-top: 28px;
    }

    .media:nth-child(7) {
        padding-left: 174px;
    }

    .media:last-child {
        padding-right: 40px;
    }

    .bg-dogs {
        position: absolute;
        left: 250px;
        bottom: 0;
    }

    .top-promo {
        margin-top: 183px;
    }
}

.info {
    width: 780px;
    padding-top: 100px;
    margin: auto;
    text-align: center;
    color: #444444;
    font-family: 'Rubik';
    font-style: normal;

    .info-about {
        font-weight: 400;
        font-size: 34px;
        line-height: 42px;
    }

    .info-mission {
        padding-top: 15px;
        font-weight: 300;
        font-size: 16px;
        line-height: 26px;
    }

    .buttons {
        margin-top: 15px;
        padding: 20px 50px 21px;
        border-radius: 40px;
        cursor: pointer;
    }

    .info-take {
        background: #E73D66;
        border: none;
    }

    .info-take:hover {
        background: #444444;
        color: #fff;
        transition: all 0.4s ease;
    }

    .info-help {
        margin-left: 10px;
        border: 1px solid rgba(231, 61, 102, 0.4);
    }

    .info-help:hover {
        background: #FFE4EB;
        transition: all 0.4s ease;
    }

    .text-button {
        width: 137px;
        height: 19px;
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 19px;
    }

    .text-help {
        color: #E73D66;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Четыре лапы</title>
</head>

<body>
    <div class="top">
        <ul class="header">
            <li><img class="logo" src="img/logo-dogs.svg" alt="logo"></li>
            <li><img class="logo-2" src="img/logo4.svg" alt="logo-2"></li>
            <li class="pages">О приюте</li>
            <li class="pages">Питомцы</li>
            <li class="pages">Полезные советы</li>
            <li class="pages">Контакты</li>
            <li class="media"><img src="img/Instagram.svg" alt="instagram"></li>
            <li class="media"><img src="img/vk.svg" alt="vk"></li>
            <li class="media"><img src="img/telegram.svg" alt="telegram"></li>
        </ul>
        <img class="bg-dogs" src="img/bg-dogs.png" alt="">
        <!-- <h3 class="top-promo">Приют для собак <span style="color: #E73D66;">четыре лапы</span></h3> -->

    </div>

    <div class="info">
        <h2 class="info-about">Помогаeм людям и питомцам из приютов встретиться и стать друзьями на всю жизнь</h2>
        <p class="info-mission">Миссия проекта - формирование культуры ответственного отношения к домашним животным.
            Решение взять кошку или собаку из приюта должно быть осознанным, именно поэтому мы помогаем потенциальным
            владельцам не только найти питомца, но и подготовиться к жизни с новым другом.</p>
        <button class="buttons info-take">
            <p class="text-button">ВЗЯТЬ ПИТОМЦА</p>
        </button>
        <button class="buttons info-help">
            <p class="text-button text-help">ПОМОЧЬ ПРИЮТУ</p>
        </button>
    </div>
</body>

<footer>

</footer>

</html>

3 ответа 3

1

Можете добавить свойство max-width: 100%; для .top и для .header. В таком случае эти элементы "не захотят" принимать всю ширину, что для них установили, и максимально смогут принять ту ширину, что им доступна от родителя

1
  • Спасибо за совет, для .top помогло! Скролл убрался даже без костыля :)
    – syrex
    25 июн 2022 в 13:26
0

Горизонтальный скролл задаёт свойство width: 1920px

4
  • Не является ответом на вопрос. Чтобы оставить свои замечания или попросить у автора внести уточнения, оставьте комментарий к соответствующему сообщению. — из очереди проверок
    – 4500zenja
    25 июн 2022 в 9:42
  • 1
    @4500zenja Что значит, не яявляется ответом на вопрос? Я скопировал себе весь код автора вопроса, нашёл свойство, которое добавляет горизонтальный скролл, и ответил. Ответ мой исчерпывающий! 25 июн 2022 в 10:45
  • Я бы не сказал, что ответ исчерпывающий — нет причин того, почему данное свойство задаёт горизонтальный скролл, что нужно сделать, чтобы убрать этот скролл и т.д. Ответ от Spartak хотя бы описывает, что нужно сделать, чтобы исправить данную ошиюку
    – 4500zenja
    25 июн 2022 в 12:04
  • 1
    @4500zenja Как это нет причин??? Ширина блока задана 1920px, ширина экрана у автора меньше, поэтому появляется горизонтальный скролл. Ответ более, чем исчерпывающий. 25 июн 2022 в 13:06
0
  1. У вас кавычка у описания стелей не закрыта в css для класса .top .
  2. Предположу что горизонтальный скролл может еще появляеться из за фиксированного свойства width: 1920px; у .top, попробуйте уменьшить это значение.
  3. Есть универсальный костыль, если увдруг не помогут 2 пункта описанные выше, который отключает горизонтальную прогрукту на странице. Вы всегда можете добавить overflow-x: hidden; в ваш css, чтобы горизонтальная прокрутка никогда не отображалась. Многие побьют и обматерят меня за то что я вам рассказываю о 3-ем варианте, так как это не очень хорошее решение. Если пора деплоить в прод и нет времени искать в чём проблема, то впринципе пойдет.

Рекомендую поэтапно добавлять решение из каждого пункта и смотреть на результат.

* {
    margin: 0;
    padding: 0;
}

    .top {
        position: relative;
        width: 400px; /*уменишьте зачение width*/
        height: 790px;
        background: #F4F4F4;
     }/*ваша ковычка, которуб вы забыли*/


/*гарантирует отсутсвие горизонтальной полосы прокрутки, добавьте/удалите этот фрагмент кода по необходимости */
    html { 
       overflow-x: hidden; 
    }
      
      
    .header {
        position: absolute;
        width: 1180px;
        height: 80px;
        top: 20px;
        left: 250px;
        background: #E73D66;
        border-radius: 90px;
        display: flex;
        list-style-type: none;
    }

    .logo {
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 40px;
    }

    .logo-2 {
        padding-top: 23px;
        padding-bottom: 24px;
        padding-left: 15px;
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Четыре лапы</title>
</head>

<body>
    <div class="top">
        <ul class="header">
            <li><img class="logo" src="img/logo-dogs.svg" alt="logo"></li>
            <li><img class="logo-2" src="img/logo4.svg" alt="logo-2"></li>
            <li class="pages">О приюте</li>
            <li class="pages">Питомцы</li>
            <li class="pages">Полезные советы</li>
            <li class="pages">Контакты</li>
            <li class="media"><img src="img/Instagram.svg" alt="instagram"></li>
            <li class="media"><img src="img/vk.svg" alt="vk"></li>
            <li class="media"><img src="img/telegram.svg" alt="telegram"></li>
        </ul>
        <img class="bg-dogs" src="img/bg-dogs.png" alt="">
        <!-- <h3 class="top-promo">Приют для собак <span style="color: #E73D66;">четыре лапы</span></h3> -->

    </div>

    <div class="info">
        <h2 class="info-about">Помогаeм людям и питомцам из приютов встретиться и стать друзьями на всю жизнь</h2>
        <p class="info-mission">Миссия проекта - формирование культуры ответственного отношения к домашним животным.
            Решение взять кошку или собаку из приюта должно быть осознанным, именно поэтому мы помогаем потенциальным
            владельцам не только найти питомца, но и подготовиться к жизни с новым другом.</p>
        <button class="buttons info-take">
            <p class="text-button">ВЗЯТЬ ПИТОМЦА</p>
        </button>
        <button class="buttons info-help">
            <p class="text-button text-help">ПОМОЧЬ ПРИЮТУ</p>
        </button>
    </div>
</body>

<footer>

</footer>

</html>

1
  • Касаемо первого предположения, то тут не совсем верно, закрывающая скобка ниже находится, просто дочерние элементы top я вложил в него. А вот насчет разрешения - да, оказалось правда, спасибо. Не знаете, как избавиться от скролла, не меняя ширину? Если не считать ответом 3 вариант
    – syrex
    25 июн 2022 в 12:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.