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

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

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

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

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