기기별 설정이 반영되지 않을 때 – ZenBlocks buttonBasic
결론
기기별 설정 미반영은 대체로 **CSS 캐시 잔존, 브레이크포인트 불일치, 테마 CSS 충돌** 때문에 발생합니다.
—
원인
1. CSS 캐시가 오래된 상태
2. 브레이크포인트 변경 후 CSS 미재생성
3. 테마 CSS 선택자 우선순위가 더 높음
4. 에디터 미리보기만 확인함
5. 기기별 값이 비어 있어 데스크톱 값으로 폴백됨—
해결 절차
### 1단계: 프런트엔드에서 확인
1. 에디터 미리보기가 아닌 실제 프런트엔드 페이지를 엽니다.
2. DevTools(F12)를 엽니다.
3. 반응형 모드에서 화면 폭을 변경합니다.
4. `computed styles`로 실제 적용값을 확인합니다.### 2단계: 캐시 정리
1. `/wp-content/uploads/zenblocks/`를 확인합니다.
2. 브라우저 캐시를 비웁니다.
3. CDN 사용 시 CDN 캐시도 퍼지합니다.
4. 서버 캐시 플러그인 캐시도 함께 비웁니다.### 3단계: 브레이크포인트 확인
1. 글로벌 설정에서 브레이크포인트 값을 확인합니다.
2. ZenBlocks 기본값:
– **MD(태블릿)**: 1024px
– **TB(소형 태블릿)**: 768px
– **SP(스마트폰)**: 480px
3. 테마 브레이크포인트와 정합성을 확인합니다.
4. 변경 후 CSS가 재생성됐는지 확인합니다.### 4단계: 선택자 충돌 확인
1. DevTools에서 해당 버튼 CSS 규칙을 확인합니다.
2. ZenBlocks 규칙이 취소선으로 덮였는지 확인합니다.
3. 테마 CSS 우선 적용 시 테마 쪽 조정이 필요할 수 있습니다.### 5단계: 기기별 값 확인
1. 기기 전환하면서 각 패널 값을 확인합니다.
2. 빈 값은 데스크톱 값을 폴백으로 사용합니다.
3. 기기별 분리가 필요하면 값을 명시적으로 입력합니다.—
주의사항
– 에디터 반응형 미리보기(iframe)와 실제 프런트엔드는 차이가 날 수 있습니다.
– 브레이크포인트 변경은 사이트 전체에 영향이 있으므로 신중히 진행하세요.—
관련 설정
– [표시 설정](../display/)
– [폰트 설정](../font/)
– [레이아웃 설정](../layout/)