Pourquoi ce snippet ?
Les débordements horizontaux (éléments qui dépassent de l’écran) ruinent l’expérience mobile et provoquent des pertes de confiance et conversions. Ce snippet corrige automatiquement les causes les plus fréquentes : iframes, images larges, carrousels mal dimensionnés, et conteneurs sans box-sizing.
Un CSS simple qui cible et corrige les débordements fréquents sans toucher au markup.
Adapté pour être collé dans un bloc CSS global sur Systeme.io ou dans l’entête de page.
Pas de JS — uniquement CSS pour rester léger et rapide.
Instructions claires + exemples pour les cas courants (iframe, images, sliders).
Code snippet (coller dans votre CSS)
/* Anti-débordement mobile — X-TERA snippet
Collez ce CSS dans la section "custom CSS" de votre page (Systeme.io, etc.) */
html,body { max-width:100%; overflow-x:hidden; }
* { box-sizing: border-box; }
/* Forcer les iframes / embeds à être responsive */
iframe, embed, object, .responsive-embed {
max-width: 100%;
width: 100%;
height: auto;
display: block;
}
/* Optional helper: center page and hide tiny subpixel overflow */
.page-wrapper { max-width:100%; margin:0 auto; overflow-x:hidden; }
/* End snippet */
Tu peux personnaliser ces règles (ajouter sélecteurs spécifiques de ton thème) pour corriger des cas particuliers. Si tu veux, je te fournis une version adaptée à ton site (dis-moi l’URL ou colle le HTML problématique).