너비 : 휴대 기기의 화면이 100 % 채워지지 않습니다.

Question

현재 모바일 기기 용 Wordpress 사이트를 최적화하려고하지만 사이트의 푸터가 협조하도록 노력하고 있습니다. 사이트가 여기에 있습니다 : http://whitehallrow.com/

모바일에로드하면 본문의 너비가 화면 크기에 따라 줄어들고 여기에 포함 된 텍스트가 모두 포함됩니다. 그러나 바닥 글의 너비는 컴퓨터 화면에서 잘 보이도록 하드 코드되어 있기 때문에 이해할 수 있습니다. 바닥 글이 본문의 너비를 조정할 수 있도록 500 픽셀 너비 또는 더 작은 화면이있는 장치를 대상으로하는 CSS에서 미디어 쿼리를 만들었습니다. 여기에 내가 조정 봤는데 내 CSS의 미리보기입니다 : 어떤 이유로,이 작동하지 않습니다에 대한

@media screen and (max-width: 500px) { 
#customfooter{ 
     width:100%; 
} 
} 

는 - 그것은 여전히 ​​몸보다 훨씬 넓은 것으로 바닥 글을 보여줍니다. 나는 최대 너비를 시도했다 : 100 %, 너비 : 자동; 최대 너비 : 자동, 아무도 작동하지 않습니다.

아무 것도 하드 코딩하지 않고 어떻게 달성 할 수 있습니까?

Answer 1

클래스가 그래서 이것은 내가 방화범을 사용하여 그것을 밖으로 시도하고 이렇게 잘 작동하는 것 같군 더 높은 우선 순위를

.page #teakfooter { 
    width: 100%; 
} 
.page #verybottom { 
    width: 100%; 
} 

를 가져옵니다 추가

#teakfooter { 
    width: 100%; 
} 
#verybottom { 
    width: 100%; 
} 

에서 CSS를 변경

.

편집 : 덧글에서 몇 가지 더 많은 것을 살펴본 후, 바닥 글을 채우지 못하게하는 몇 가지 사항을 발견했습니다.

.site { 
    padding: 0 1.71429rem; 
} 

이렇게하면 #customer footer의 양쪽에 패딩이 발생합니다.

#teakfooter { 
    margin-left: -40px; 
} 

이렇게하면 #teakfooter의 오른쪽에 공백이 생깁니다.

Answer 2

또한 방화산에서 METRICS (오른쪽 열에 Computed Styles, Styles, Metrics 등)를 확인할 수 있습니다. METRICS에서 당신은 당신의 몸 주위에 padding: 24px;

솔루션이 있음을 볼 수 있습니다 :

body { 
    padding: 0; 
}