После уменьшения ширины контента сайдбар ушел под контент. Как исправить?

голоса: 0

Уменьшил ширину контента в десктопе до 600, а общую ширину до 900. Ширина сайдбара 270, не трогал, но теперь сайдбар при стандартном разрешении 1024 на 768 ушел под контент. Не могу понять, как исправить.

http://paranormal-news.ru/_st/my.css

Адрес сайта http://paranormal-news.ru/
Закрыто с пометкой: Вопрос решен!
| Автор: | Категория: Дизайн сайта
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

голоса: 0
Так и должно быть. У вас адаптивный дизайн, так работают стили для адаптивности.
| Автор:
При прошлых показателях при разрешении 1024 сайдбар под контент не уходил. В этом и проблема, что я не могу понять, почему сейчас начал уходить. Где-то что-то нарушилось.  Где надо исправить адаптивность, чтобы при ширине 1024 сайдбар был на своем месте?
Paranormal,

Настраивается в стилях строка 1287:

@media screen and (max-width: 1023px) {
 .cnt {
 width: 570px;
 }
 #content {
 width: 100%;
 float: none;
 padding-bottom: 30px;
 margin-bottom: 30px;
 border-bottom: 1px solid #dcdcdc;
 }
 #sidebar {
 width: 100%;
 float: none;
 }
 #sidebar .block {
 float: left;
 width: 270px;
 margin-right: 10px;
 }
 #sidebar .block:nth-child(2n) {
 margin-right: 0;
 }

 .col4 {
 width: 270px;
 }
 #footer .ph-inf {
 width: 80px;
 height: 80px;
 }
 #top {
 height: auto;
 line-height: 30px;
 padding: 10px 0;
 }
 .top-left, .top-right {
 float: none;
 }
 #search {
 position: static;
 float: none;
 width: 100%;
 padding: 10px 0 20px;
 }
 .news5 > * {
 margin-left: 0;
 }
 .news5 .news-img {
 width: 570px;
 height: 300px;
 margin-bottom: 15px;
 }
}

Вынесите выделенное в свое отдельное условие:

@media screen and (max-width: 1023px) {  сюда }

и пропишите под какую ширину ему отображаться и под какую смещаться вниз. Под 1023 он еще справа, если больше на 1px уже смещается, настраивайте условие.

Yuri_Geruk,

Спасибо! Сайдбар встал на свое место при @media screen and (max-width: 1010px) 

...