전에 테마를 커스텀해서 사용하다가 불필요한 코드도 많고 속도도 느린 것 같아서 과감하게 변경하였다. 변경한 테마는 PC 화면에서 이상이 없었지만, 모바일로 봤을 때 한 가지 문제를 발견하였다.
워드프레스 대시보드 – Appearance – Customize
위의 설정 화면으로 와서 테마가 잘 적용되었는지 확인했는데 모바일 버전 화면에서 스크롤 바가 있었고 마우스로 드래그하면 화면도 따라 움직였다.
그래서 스마트폰으로 접속해서 확인해봤는데 역시나 화면이 옆으로 움직이고 있었다. 블로그에 코딩 같은 주제를 제외한다면 모바일 접속자가 더 많을 텐데, 좋은 사용자 경험 제공을 위해 이 문제는 꼭 해결하는 것이 좋다.
조금 전 customize 화면을 보면 css를 입력할 수 있는 창이 있을 것이다. css창의 비어 있는 아무 곳에 위의 코드를 입력하면 간단하게 해결할 수 있다.
참고로 먼저 적용한 코드는 아래와 같다.
body {overflow-x: hidden;}
하지만 모바일로 블로그에 접속했을 때 여전히 화면이 가로로 움직여서 html과 max 너비를 추가했더니 해결할 수 있었다.
코드는 복사해서 css에 넣고 저장 버튼을 클릭하면 된다.
