저희 웹 사이트가 모바일 화면에서 가로 스크롤을 허용하는 이유는 무엇입니까?

Question

저는 지금 3 시간 동안 머물 렀습니다. 왜 우리 페이지가 (모바일 너비로) 가로로 스크롤되는지 알 수 없어요.

내 문제의 비디오를 녹화했습니다. 나는 수 시간 동안 개발 도구에 있었고 내 머리카락을 꺼내려고합니다.

VIDEO

어떤 생각이? 그것의 낱말 보도 자료 위치.

Website에서 직접 테스트 할 수도 있습니다.

감사합니다.

Answer 1

가 될 때까지 크롬 개발 도구의 요소를 삭제하는 몇 분 소비 모바일에서 가로 스크롤이 발생하는 것을 발견했습니다. 바닥 글에 신용 카드 로고가있는 이미지 (.cc-reference)입니다. margin-left: 50%; 및 left: -140px으로 위치가 지정됩니다. 이는 약간의 해킹으로 상대 위치 지정으로 인해 공간의 50 % 이상을 차지하므로 추가 공간이 생깁니다.

수정하여 스타일을 업데이트하십시오.

전 :

@media screen and (max-width: 550px) 
    .cc-reference { 
     float: none; 
     margin-left: 50%; 
     left: -140px; 
     position: relative; 
     margin-top: -8px; 
    } 
} 

변경하려면 다음

@media screen and (max-width: 550px) 
    .cc-reference { 
     float: none; 
     display: block; /* making it block level allows you to... */ 
     margin: -8px auto 0; /* center automatically */ 
    } 
} 

Answer 2

#bottom-footer에 깊이 묻힌이 이미지에주의를 기울이십시오.

모바일보기에서 이미지를 삭제하면 가로 스크롤이 사라졌습니다. 당신은 상대적으로 위치 이미지를 가지고와 left: -140px와 한

.

절대 위치 요소 달리

@media screen and (max-width: 550px) 
.cc-reference { 
    float: none; 
    margin-left: 50%; 
    left: -140px; 
    position: relative; 
    margin-top: -8px; 
} 

는 상대적 위치 결정 요소 (즉, 그들 문서 흐름에서 제거되지 않는다)을 원래의 공간을 유지한다. 따라서 이미지 요소에 140 픽셀 너비를 추가하여 가로 스크롤이 발생합니다.

여기 전에 본과 (행동의 일러스트와 함께) 더 자세한 답변을 작성했습니다

• Why are horizontal scroll bars shown on my website?