콘텐츠의 너비가 모바일 화면을 채우지 못합니다.

Question

모바일 친화적 인 디자인으로 만들려고합니다. 내가 가지고있는 것은 http://ipadpeek.com/ (위대한 도구!)에있는 디자인을 볼 때 모든 것이 잘 어울린다는 것입니다. 실제로 iPhone 4를 통해 볼 때 콘텐츠는 페이지의 약 80 % 만 차지하지만 나머지 20 %는 흰 바탕.

이 전체 너비에 맞게 나타납니다 하나의 요소이며,이 다음 스타일이 왜 이런 일이

<div class="text-elements"> 
<h2>Your website can achieve...</h2> 
</div> 

.text-elements { 
    float: none; 
    margin: 0; 
    padding: 75px 10px; 

    h2 { 
     font-size: 4em; 
     width: 100%; 
    } 
} 

어떤 아이디어?

Answer 1

FYI http://ipadpeek.com/과 같은 대부분의 온라인 iPad 스타일 도구는 이러한 오버플로 문제를 해결하지 못합니다.

결국 문제는 명시 적으로 너비가 설정된 하나 이상의 div가 발견되었지만 범인으로 찾기는 매우 어려웠습니다. 이 문제와 다른 사람에 대한

팁 : 모든 디자인은 반응 할 것이다 알고있는 경우

1. 이 명시 폭 된 div에 max-width: Xpx 기본 스타일 시트에 width: 100%를 사용하는 그들을 범죄자가되는 피하기 위해 나중에 코스에서.

2. 너비를 항목에 100 % 사용하는 경우 내부 div에 추가 항목을 추가하거나 (특히 픽셀 단위 인 경우) width: 95%, padding: 2.5%과 같은 추가 항목을 추가해야합니다.

3. 문제가 발생한 곳을보기 위해 콘텐츠를 보관하는 기본 래퍼 중 하나를 시도해보십시오 (overflow: hidden).