Как убрать отступы?

Question

[Jostic]

Есть шаблон под названием Shaped Blog, хочу сделать что бы контент начинался с самого начала страницы без отступа, и атк же было с правой стороны. Я так понимаю надо убрать отступ и расширить ширину новости. Как это сделать. сайт orybe.net

Answer 1

[UndineS]

Текст страницы заключен в div со следующими классами:

<div id="content" class="site-content">
		<div class="container">

На странице подключен бутстрап (bootstrap.min.css), который задает тегам с классом "container" фиксированную ширину:

@media (min-width: 768px) { //это означает, что в родительском классе с шириной от 768 пикселей (фактически, в данном случае, при экранах от 768 пикселей) блок с контентом будет иметь ширину от 750 пикселей
    .container {
        width:750px
    }
}

@media (min-width: 992px) { //на экранах от 992 пикселей - блок "container" будет иметь ширину 970 пикселей
    .container {
        width:970px
    }
}

@media (min-width: 1200px) { //на экранах от 1200 пикселей - блок "container" будет иметь ширину 1170 пикселей
    .container {
        width:1170px
    }
}

Чтобы "перебить" стандартные настройки - рекомендую добавить более сложный селектор для текущего случая (более сложные селекторы имеют приоритет над более общими):

.site-content .container {
width:100%;
}

Таким образом, зададим ширину по размеру родительского блока "site-content" (фактически, на ширину экрана).
Если хочется убрать и оставшиеся отступы по краям, то кроме условия на ширину добавляем:

padding-right: 0px;
    padding-left: 0px;

Стандартно паддинги стоят 15 пикселей.

Comments

[Jostic]

По первому, пробовал менял значения width:......px, но на сайте не как не влияло. Попробовал добавить ваш код, тоже не помогает. Возможно не в то место добавляю. Или браузер не обновляет сайт после изменения код, может быть такое ? Каким браузером вообще лучше пользоваться ? обновляю страницы при помощи F5

[UndineS]

К сожалению, на данный момент ваш сайт недоступен и скрин сделать не смогу, но в целом могу посоветовать - перейдите в режим разработчика (кнопка F12), выберите окошечко с кодом, там кнопкой F3 включите поиск и найдите строку . Выберите эту строку. Справа будут показаны стили CSS, которые сейчас применяются к выделенному элементу. Проверьте, что там отображаются добавленные стили. Для эксперимента можете прямо в браузере добавить новые строчки, но имейте в виду, что они не сохранятся, так можно только посмотреть, как изменения повлияют на верстку.

Насчет браузера - верстайте в любом: есть специфика в отображении и настройке некоторых свойств, но в идеале хороший сайт должен корректно работать и выглядеть во всех браузерах и в идеале нужно проверять готовый сайт в нескольких браузерах.

Насчет необновленного кода - стили CSS могут кэшироваться (отображаться старые). Самый простой способ проверить, как выглядит актуальный вариант - это зайти на страницу в режиме инкогнито ("Меню браузера" - "Новое окно в режиме инкогнито").

[Jostic]

UndineS, Разобрался, спасибо большое. Ещё такой совет нужен, как лучше делать, что бы как сейчас сайт имел фиксированную ширину, или когда вставляю width:100%; он растягивается по ширине монитора ?

[UndineS]

Jostic, наверное, Вы уже нашли ответ, но на всякий случай напишу:
стандартное решение - фиксированная ширина (например, width: 1170px) и отступы margin: 0 auto (т.е. 0 по высоте и auto по ширине - такое положение позволяет разместить контейнер посередине страницы, браузер автоматически рассчитывает одинаковые отступы по бокам).

Также вариант может дополняться условиями на ширину экрана:

.container {
    width: 1170px; /*стандартная ширина блока container*/
    margin: 0 auto; /*центрируем блок*/
}
@media screen and (max-width: 600px) { /*при условии, что ширина экрана не более 600 пикселей*/
    .container {
        width: 480px; /*задаем ширину блока для мобильных, margin не перезаписываем, остается стандартный*/
    }
}

сейчас на Вашем сайте примерно это же и реализовано: при клике на элемент с классом "container" в панели разработчика отображено, что он он имеет ширину 1170 пикселей при условии, что ширина экрана не менее 1200 пикселей (@media (min-width: 1200px)).

Answer 2

[Максим]

Ластиком сотрите ...

Comments

[Lord_Dantes]

ХАхпа та да. Я думал что случайно попал на сайт по фрилансу а не на тостер