Исправить веб-страницу в соответствии с разрешением экрана

Question

Я создаю веб-страницу, которая не настраивается в соответствии с разрешением экрана.На высоких разрешениях выглядит нормально, но на 1024x768 видна только левая сторона страницы.Я попытался поместить все это в контейнер и выровнять его по центру, но это не работает.Каким был бы выход?

Вот немного HTML:

<div id="layer-container" style="position:absolute; background-    image:url(images/bkgrd_final.jpg);">         
    <div id="info-layer" style="position: absolute; text-align: left; left: 0px; top: 2px; height: 747px; z-index: 48; display: block; margin:0 0 0 -285px;" title="">                     

А вот немного CSS:

div#container {
    position:absolute;
    margin:0 auto;
    text-align:left;
    overflow:visible;
}
body {
    font-size: 8px;
    line-height: 1.1875;
    text-align: center;
    margin: 0;
    background-color: #0C0C0C;
    background-repeat: repeat-x;
    background-position: center top;
    color: #000000;
    overflow-x:hidden;
}

Answer 1

Я бы посоветовал вам добавить медиазапросы со стилями для небольших устройств.

@media only screen and (max-width: 768px) { 

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