워드프레스 모바일 화면에서 여백이 문제?
워드프레스! 사용하다 보면 모바일 화면에서 양쪽에 애매한 여백이 남아 콘텐츠가 좁아 보일 때가 있습니다.
이런 경우, 텍스트나 이미지가 화면에 딱 맞게 들어오지 않고 떠 있는 느낌이 들면서
가독성이 떨어지고, 무엇보다 답답한 인상을 줄 수 있습니다. 😥
특히, GeneratePress(제너레이트프레스) 테마를 사용할 경우, 기본적으로 여백(padding)이 포함되어 있어
모바일에서 전체 화면을 100% 활용하지 못할 수도 있습니다.
비포 이미지
🔻 문제점 (Before)
- 모바일에서 양쪽 여백이 남아 콘텐츠가 답답해 보임
- 글자가 작아 보일 수 있어 읽기 불편함
- 전체 화면을 활용하지 못해 디자인이 비효율적
모바일에서도 꽉 차게 만들기!
이 문제는 간단한 방법으로 해결할 수 있습니다.
적절한 설정을 하면 모바일에서도 여백 없이 꽉 찬 화면을 만들 수 있습니다.
애프터 이미지
🔺 결과 (After)
- 여백 없이 콘텐츠가 화면에 꽉 차서 답답한 느낌이 사라짐
- 텍스트 크기가 적절하게 유지되어 가독성이 향상됨
- 디자인적으로 더 깔끔하고, 시원한 느낌을 줌
✅PC에서 작업 →모양 → 사용자 정의 → 추가 CSS에 맨 아래 붙여 넣으면 끝!