워드프레스 GeneratePress 테마 사이드바 모바일에서 숨기기

GeneratePress 테마를 위한 차일드(Child) 테마 파일

워드프레스 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 테마의 경우 차일드 테마도 다운로드가 가능하오니 꼭 차일드 테마를 등록 후 활성화 해서 이용하시기 바랍니다.

연관 글