워드프레스 GeneratePress 테마의 사이드바를 모바일에서 숨기는 방법에 대해 알아보겠습니다.
왼쪽 사이드바의 경우
@media(max-width: 768px) {
#left-sidebar {
display: none;
}
}
오른쪽 사이드바의 경우
@media(max-width: 768px) {
#right-sidebar {
display: none;
}
}
왼쪽 오른쪽 사이드바 모두 사용하는 경우
@media(max-width: 768px) {
#right-sidebar, #left-sidebar {
display: none;
}
}
사이드바 위치 구분 없이 설정할 때
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
위와 같이 코드를 추가함으로써 사이드바를 모바일 뷰에서 숨길 수가 있습니다.
워드프레스 관리자로 로그인 이후 메뉴 – 외모 > 추가 CSS 로 들어가서 복사 붙이기를 해주면 됩니다.
보통 오른쪽 사이드바를 활용하는 경우가 많으니 가장 상단의 코드를 복사 붙이기 하면 문제없이 모바일 뷰에서 사이드바가 숨겨질 것입니다.
이렇게 CSS를 수정하는 경우 꼭 차일드 테마를 활용하는 것을 추천합니다.
GeneratePress 테마의 경우 차일드 테마도 다운로드가 가능하오니 꼭 차일드 테마를 등록 후 활성화 해서 이용하시기 바랍니다.
- GeneratePress 테마를 위한 차일드(Child) 테마 파일
- 워드프레스 OceanWP 테마 사이드바 모바일에서 숨기기
- 워드프레스 블로그 구글 SEO & 애드센스 설정 끝내기 전자책