Блог

Главная - Вопросы по программированию - Настройки CSS во всю ширину

Настройки CSS во всю ширину

#css

#css

Вопрос:

Что-то не так с моим CSS полной ширины на рабочем столе. Вы можете видеть по ссылке на скриншот ниже, как контейнер не заполняет левую сторону.

Я использую: ширина: 100vw; позиция: относительная; слева: 50%; справа: 50%; поле слева: -50vw; поле справа: -50vw;

смотрите скриншот

Сайт находится здесь https://livinghealthywithchocolate.com/recipes / или вы также можете увидеть, как это происходит на главной странице.

Как мне это исправить?

Спасибо!

Комментарии:

1. width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; бесполезно. но сброс на поле тела может быть полезен. Контейнер блоков заполняет всю доступную ширину. width: 100% на самом деле не требуется, width: 100vw будет проблемой, как только появится полоса прокрутки….

Ответ №1:

Это происходит не при каждом размере экрана. У вас есть медиа-запрос, который мешает заполнению, если вы удалите правило заполнения, оно работает.

 @media only screen and (min-width: 1023px)
.site-inner {
    margin: 20px auto 0;
    padding: 27px 37.5px;
}

Должно быть

  @media only screen and (min-width: 1023px)
    .site-inner {
        margin: 20px auto 0;
    }

Комментарии:

1. Отлично, спасибо! Я добавил следующее, и это устранило проблему 🙂 @экран только для мультимедиа и (минимальная ширина: 1023 пикселей) { .site-inner { заполнение: 0; } }

2. Потрясающе! Я только что проверил ту часть, где у вас возникли проблемы. Не забудьте использовать инструменты разработчика браузера (f12 в chrome) для отладки этих проблем!

Ответ №2:

Вы можете добавить это в свой CSS.

 *{margin:0; padding:0;}


Then set the width of the container to 100%.

Комментарии:

1. знаете ли вы, что при этом поля и отступы для всех элементов на этой веб-странице будут равны нулю? (включая все настройки браузера по умолчанию, выровняйте верхние / нижние поля для заголовков и абзацев)

Метки: