웹 사이트 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%; 

} 

모바일보기에서 웹 사이트를 더보기 좋게 만들어야합니다.

편집 :

은 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을 사용합니다 :) wembpage 설정에서 더 나은 것으로 나타납니다. 다음은 절대 위치에있는 다른 항목을 가질 수 있습니다. Wour 래퍼에 상대적이어야합니다. 일부는 전체 웹 페이지입니다. 신체가 페이지의 내용에 맞게 조정되므로 최소 높이 100 %의 몸체는 없으므로 텍스트가 적 으면 스트레칭되지 않습니다! 호프 ithis는 내가 한 것처럼 당신을 도와줍니다. :)