Vérifier les réglages par appareil non appliqués – ZenBlocks buttonBasic
Conclusion
Les causes les plus fréquentes sont : **cache CSS restant, incohérence de breakpoints, conflit avec le CSS du thème**. Après modification des breakpoints, un nettoyage du cache est indispensable.
—
Causes
1. **Cache CSS obsolète** : si le cache n’est pas régénéré après modification, l’ancien style continue de s’appliquer.
2. **CSS non régénéré après changement de breakpoint** : les nouveaux breakpoints ne sont pas pris en compte sans régénération CSS.
3. **Conflit de priorité avec le thème** : si les sélecteurs du thème sont plus spécifiques, ils écrasent ZenBlocks.
4. **Vérification faite uniquement dans l’éditeur** : l’aperçu responsive de l’éditeur (iframe redimensionnée) peut différer du front-end réel.
5. **Valeurs non définies sur certains appareils** : en l’absence de valeur dédiée, la valeur PC (`Default`) sert de fallback.—
Procédure
### Étape 1 : vérifier en front-end réel
1. Ouvrez la page publique (pas seulement l’aperçu éditeur).
2. Ouvrez les DevTools (`F12`).
3. Passez en mode appareil et testez la largeur cible.
4. Vérifiez dans les styles calculés que la valeur attendue est bien appliquée au bouton.### Étape 2 : vider les caches
1. Vérifiez le dossier `/wp-content/uploads/zenblocks/`.
2. Videz le cache navigateur (`Ctrl+Shift+R` / `Cmd+Shift+R`).
3. Si vous utilisez un CDN, purgez aussi son cache.
4. Si un plugin de cache serveur est actif (WP Super Cache, W3 Total Cache, etc.), videz-le également.### Étape 3 : vérifier les breakpoints
1. Contrôlez les valeurs dans les réglages globaux de l’éditeur.
2. Valeurs initiales ZenBlocks :
– **MD (tablette)** : `1024px`
– **TB (petite tablette)** : `768px`
– **SP (smartphone)** : `480px`
3. Vérifiez la cohérence avec les breakpoints du thème.
4. Après changement de valeur, confirmez que le CSS responsive est bien régénéré.### Étape 4 : vérifier la priorité CSS
1. Inspectez le bouton dans DevTools.
2. Vérifiez que les règles ZenBlocks ne sont pas barrées.
3. Si le CSS du thème domine, les réglages ZenBlocks sont écrasés.
4. Ajustez la couche CSS du thème si nécessaire.### Étape 5 : vérifier les valeurs par appareil
1. Passez d’un appareil à l’autre dans l’éditeur.
2. Vérifiez les valeurs de chaque panneau.
3. Renseignez explicitement les valeurs par appareil quand vous ne voulez pas de fallback PC.—
Points d’attention
– Les problèmes responsive viennent souvent d’un écart de spécificité entre le style SCSS de base et le CSS dynamique généré côté PHP.
– L’aperçu responsive éditeur n’est pas une preuve suffisante : validez toujours en front-end réel.
– Modifier les breakpoints impacte tout le site. Faites ces changements avec prudence.—
Paramètres liés
– [Paramètres d’affichage](../03-display-settings.md) – Affichage/masquage par appareil
– [Paramètres de police](../05-font-settings.md) – Taille de police par appareil
– [Paramètres de mise en page](../10-layout-settings.md) – Marges et tailles par appareil