johngrib / johngrib-jekyll-skeleton

my github.io jekyll blog skeleton
MIT License
70 stars 105 forks source link

블로그 모바일에서 우측의 여백을 제거하라 #45

Open hannut91 opened 1 year ago

hannut91 commented 1 year ago

모바일에서 보면 가로로 스크롤이 됩니다. 그래서 위 아래로 스크롤 하려고 해도 옆으로 흔들립니다. 가로로 스크롤 되지 않도록 길이를 조정했습니다.

image

위의 사진을 보시면 우측에 5px정도 여백이 있어서, 디바이스 크기 보다 5px 큰 요소 때문에 가로로 스크롤 됩니다.

image

범인은 바로 위의 input태그였습니다. 길이가 100% 인데, 왼쪽 패딩이 5px이 있어서 길이가 100% + 5px이 되어버립니다.

길이가 패딩을 포함한 길이로 100%가 되도록 하기 위해 box-sizing속성을 border-box로 수정했습니다.

See also