Сайт Funny On Mobile Devices

Question

Итак, я просматривал свой сайт на своем мобильном устройстве, и есть несколько ошибок, которые я не смог исправить. Первый - нижний колонтитул моего сайта.

http://www.webbmaster.com.au/web-programs/questdesign/

Как вы можете увидеть мой колонтитул выглядит искаженным. Любые идеи о том, как исправить это для мобильных устройств. Это мой код CSS для нижнего колонтитула.

.footer { 
background-color: #F6861F; 
    color: #fff; 
    padding: 20px 0; 
    text-align: center; 
    overflow: hidden; 
    width: 100%; 
} 

Другая проблема заключается в большом количестве свободного пространства внизу страницы. Как я могу это удалить?

Большое спасибо тому, кто может помочь мне разобраться в этой проблеме.

Answer 1

Это потому, что вы устанавливаете ширину по пикселям. Вы не можете ожидать, что ваш сайт будет реагировать, если вы укажете высоту, ширину по пикселям.

.body .container{ 

width:80%; 

} 
.navigation .nav-pills{ 

width:80%; 

height:20%; 

} 

Это должно сделать ваш сайт более приемлемым в мобильном режиме.

EDIT:

Добавьте это в ваш файл CSS.

@media screen and (max-width:767px){ 
    .body .container{ width:80%; height:100%;} 
    .navigation .nav-pills{height:55px;width:100%;} 
    .nav > li{float:left;} 
    .nav-pills > li a{margin: 10px 10px;} 
    .sliderr{height:340px;} 
    .footer{margin-top:10%;} 
} 

Попробуйте и дайте мне знать, если вы довольны этим. Также я не думаю, что нужно поплавок. Это просто моя привычка: X

Answer 2

это работало для меня, пришлось идти по всей моей CSS немного и редактировать, но, казалось, работали очень хорошо :)

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    padding:1em; 
    background:#5ee; 
} 
#content { 
    padding:1em; 
    padding-bottom:5em; /* Height of the footer element */ 
} 
#footer { 
    width:100%; 
    height:5em; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
} 

Это работает для мобильных и веб-страниц, чтобы поддерживать нижний колонтитул. Не нужно быть в px, я использую em's :) Изменено это для em, это я нахожу лучше для настройки wwebpage :) Тогда у вас могут быть другие предметы в абсолютном положении, просто должны быть относительны к wourper Wrapper, часть, которая является вашей всей веб-страницей :) Тело в мини-высоте 100% не будет делать это, так как тело настраивается на содержимое на странице, и поэтому, если текст меньше, он не растягивается! Надежда ithis помогает вам, как и я.