New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open

hannut91 wants to merge 1 commit into johngrib:master from CodeSoom:fix-width

Contributor

hannut91 commented Oct 27, 2022

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

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

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

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

See also

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing


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

615d565

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet