Меньшее разрешение, содержание пытается соответствовать

Question

Если вы заметите при посещении ... http://www.thebattleforarcadia.com/construction/index.html, когда вы уменьшите размер экрана, содержимое верхней панели переполняет родительский div и переходит на весь остальной сайт.

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

Есть идеи по кодированию?

Спасибо, Аарон

Answer 1

Добавить ...

min-width: 1260px;

в соответствии с правилом # news-container.

Ваш веб-сайт будет отображаться нормально с разрешением 1280x **, но будетбыть вертикальной полосой прокрутки в чем-то меньшем (по ширине).

Возможно, вы могли бы сделать минимальную ширину 960px и сделать текст расширяющимся в две строки (слегка толкая верхний рисунок)?Просто предложение

РЕДАКТИРОВАТЬ: вот пример

#news-content {
float: left;
padding-left: 25px;
padding-top: 12px;
overflow: auto;
padding-bottom: 20px;
}
#news-container {
width: 100%;
background: url(images/news-background.png) repeat-x left bottom;
z-index: 10;
}
#news-header {
width: 150px;
height: 23px;
float: left;
padding-left: 25px;
}

Приведенный выше пример заставит заголовок «Расширяться» при уменьшении разрешения без принудительного использования ширины экрана <1280 пикселей для использования вертикальной полосы прокрутки </p>

Answer 2

Дайте элемент body или любой другой элемент, который устанавливает ширину, которую вы хотите, чтобы min-width соответствовал этому.Это должно гарантировать, что всякий раз, когда страница просматривается в меньшем разрешении, имеет горизонтальную полосу прокрутки

См. Здесь для Часто используемые размеры пикселей для веб-страниц и их плюсы / минусы .