Ton site Avada s’affiche mal sur mobile ? Les causes et solutions

Si ton site Avada s’affiche mal sur mobile, le thème n’est presque jamais en cause : le problème vient le plus souvent de réglages pensés pour l’ordinateur (marges, tailles de titres, colonnes) jamais ajustés en petit écran, ou d’un cache qui sert une mauvaise version de la page. Dans les deux cas, ça se corrige depuis le Live Builder et les options d’Avada, sans toucher au code.

Il y a une exception : si l’affichage mobile était correct et s’est cassé du jour au lendemain, après une mise à jour ou un changement de plugin, ce n’est plus un problème de mise en page. Là, on cherche un conflit, un cache ou une mise à jour incomplète, et on ne s’y prend pas pareil.

Je t’ai préparé un diagnostic par symptôme : tu repères ce que tu vois sur ton téléphone, tu vas directement à la bonne cause, et tu sais à quel moment il vaut mieux arrêter de bricoler.

Avant de modifier quoi que ce soit, assure-toi que ce que tu vois est bien ce que voient tes visiteurs. Un affichage cassé sur ton seul téléphone peut venir d’une vieille version gardée en mémoire par ton navigateur.

1. Ouvre ton site en navigation privée sur ton téléphone. Si tout est normal, c’est le cache de ton navigateur : vide-le et le problème disparaît (j’explique comment dans vider le cache du navigateur quand ton site n’est pas à jour).
2. Teste sur ordinateur en mode mobile. Dans Chrome : clic droit, Inspecter (ou F12), puis Ctrl + Maj + M (Cmd + Maj + M sur Mac). Choisis un iPhone ou un Galaxy dans la liste du haut.
3. Demande à quelqu’un d’autre d’ouvrir la page sur un autre modèle de téléphone.

Le mode appareil de Chrome : tu choisis le téléphone à émuler dans la liste du haut.

Si le problème apparaît partout, il est bien sur le site. On passe au diagnostic.

Voici les symptômes les plus courants sur un site Avada en mobile, avec la piste à suivre pour chacun :

Si ton site s’affiche comme une miniature de la version ordinateur, va dans Avada > Options > Responsive et vérifie que l’option Responsive design est sur Activé. Sur « Désactivé », Avada utilise une mise en page fixe, et c’est exactement ce symptôme.

Dans le même onglet, descends jusqu’à Points d’arrêt réactifs aux éléments (Element Responsive Breakpoints). Les valeurs Small Screen et Medium Screen sont les largeurs d’écran, en pixels, à partir desquelles s’appliquent tes réglages « petit écran » et « écran moyen ». Sur webooste.com, elles sont à 640 px et 1024 px.

Avada > Options > Responsive (Avada 7.16.2) : les points d’arrêt et la typographie responsive.

Mon conseil : si quelqu’un a modifié ces valeurs et que tu ne sais pas pourquoi, note les valeurs actuelles avant de toucher à quoi que ce soit. Changer un breakpoint modifie l’affichage de toutes les pages en même temps.

C’est la cause la plus fréquente. Dans Avada, les réglages « descendent » d’un écran à l’autre : une marge de 120 px mise en grand écran s’applique aussi sur tablette et sur mobile, sauf si tu la changes. Pareil pour une colonne réglée en 1/4 si on l’a forcée pour toutes les tailles.

La solution s’appelle les responsive option sets :

1. Ouvre la page dans le Live Builder (lien Edit Live dans la barre d’administration).
2. Clique sur l’icône écran en haut à droite (Responsive) et choisis l’icône téléphone : c’est la vue petit écran.
3. Ouvre les options de la colonne ou de l’élément qui pose problème (icône crayon), puis l’onglet Design.
4. Modifie la largeur (Width), les marges ou le padding. Les réglages qui ont une petite icône d’écran à côté de leur nom peuvent prendre une valeur différente pour chaque taille d’écran : en vue petit écran, ta modification ne touche que le mobile.
5. Repasse en vue grand écran pour vérifier que la version ordinateur n’a pas bougé, puis clique sur Sauvegarder.

Ma page d’accueil dans le Live Builder, vue grand écran.

La même page en vue petit écran : menu burger, colonnes empilées.

Options d’une colonne en vue petit écran, onglet Design : la largeur est sur « Default », donc pleine largeur sur mobile.

Par défaut, Avada met les colonnes en pleine largeur sur mobile. Si ce n’est pas le cas sur ton site, quelqu’un a sans doute changé ce comportement, soit sur la colonne, soit pour tout le site dans Avada > Options > Avada Builder Elements, réglages de la colonne.

Un piège à éviter : dupliquer une section en « version ordinateur » et « version mobile » et cacher l’une ou l’autre. Ça dépanne, mais tu te retrouves avec deux contenus à mettre à jour, et une page plus lourde. Ajuster les réglages de la section existante est presque toujours la meilleure solution.

Un titre à 64 px qui rend bien sur un écran de 27 pouces prend quatre lignes sur un téléphone, et les mots longs se coupent. Tu as trois façons de régler ça :

• La typographie responsive d’Avada (Avada > Options > Responsive, section Typographie responsive) : la Sensibilité de la typographie Responsive fait rétrécir les titres sur petit écran (0 désactive la fonction), et le Facteur de taille de police minimum fixe une taille plancher : taille du texte courant multipliée par ce facteur.
• Une taille par écran : dans les réglages de l’élément Titre, en vue petit écran, indique une taille plus petite.
• La fonction CSS clamp(), qu’Avada accepte dans les champs de taille de police, par exemple clamp(32px, 5vw, 64px). Le titre s’adapte en continu entre 32 et 64 px selon la largeur de l’écran.

Ma préférence va à clamp() : tu règles une fois, et ça marche sur toutes les tailles d’écran, y compris celles entre deux paliers.

Si tu peux faire glisser ta page de gauche à droite sur mobile, un élément est plus large que l’écran. Les coupables habituels :

• une image ou un bloc avec une largeur fixe en pixels au lieu d’un pourcentage ;
• un tableau trop large pour l’écran ;
• une vidéo, une carte ou un formulaire intégré par un code iframe avec une largeur fixe ;
• une marge négative ou un CSS personnalisé ajouté un jour pour « corriger » un détail.

Pour trouver le responsable, utilise le mode mobile de Chrome (étape 1) et fais défiler la page jusqu’au bloc qui dépasse. Dans l’onglet Elements, survole le code : Chrome surligne l’élément trop large. Corrige ensuite sa largeur dans le Live Builder, en vue petit écran.

Tu as corrigé ta page dans le builder, mais rien ne change sur ton téléphone ? Ou pire, la version mobile s’affiche sur ordinateur ? Il y a de bonnes chances que ce soit le cache.

• Vide le cache de ton plugin et de ton hébergeur. Je détaille toutes les méthodes dans comment vider le cache de ton site WordPress.
• Vide aussi les caches d’Avada : Avada génère ses propres fichiers CSS et JS. Pour les régénérer, utilise Réinitialiser les caches d’Avada. Le plus rapide : depuis ton site, connecté, survole le menu Avada de la barre d’administration en haut. Tu le trouves aussi tout en bas de Avada > Options > Performance.
• Si tu utilises le rendu conditionnel par appareil (Device Type Conditional Rendering), ton cache doit servir une version différente aux mobiles et aux ordinateurs. Sinon, le premier visiteur décide de la version que tout le monde verra. Vérifie l’option « cache mobile séparé » de ton plugin de cache.

Depuis le site : menu Avada de la barre d’administration.

Ou dans Avada > Options > Performance, tout en bas.

Si l’affichage mobile était correct et s’est dégradé d’un coup, la mise en page n’y est pour rien. Regarde d’abord ce qui a changé récemment :

• Avada mis à jour sans ses plugins. Le thème fonctionne avec Avada Core et Avada Builder. Si le thème a été mis à jour mais pas ces deux plugins (ou l’inverse), des éléments peuvent s’afficher de travers. Vérifie qu’ils sont tous à jour depuis le tableau de bord Avada.
• Un nouveau plugin ou une mise à jour de plugin, en particulier un plugin d’optimisation qui combine ou retarde le CSS. Désactive-le temporairement pour voir si l’affichage revient.
• Une mise à jour qui s’est mal passée. Si tu veux revenir en arrière, suis mon guide pour annuler une mise à jour WordPress, ou restaurer une sauvegarde WordPress si tu en as une récente.

Attention, sur une boutique WooCommerce, restaurer une sauvegarde peut effacer les commandes passées depuis. Dans ce cas, mieux vaut chercher la cause que revenir en arrière à l’aveugle.

Une fois tes corrections faites, refais le test de l’étape 1 : navigation privée sur ton téléphone, mode mobile de Chrome, et un deuxième appareil. Pense aussi au menu mobile, aux formulaires et aux boutons d’appel : ça se teste avec le pouce, pas avec la souris.

Lance ensuite PageSpeed Insights sur ta page et regarde l’onglet Mobile, pas seulement l’onglet Ordinateur. Google classe ton site à partir de sa version mobile : c’est elle qui compte pour ton référencement. Si le score mobile reste bas alors que l’affichage est bon, les images sont souvent en cause (voir pourquoi ton site WordPress est lent).

Rapport PageSpeed Insights de la démo Avada Tattoo, version ordinateur. Bascule sur « Mobile » pour ton propre site.

Si tu as suivi ces étapes et que ton site s’affiche toujours mal, ou si tu n’as tout simplement pas envie de passer ton week-end dans le Live Builder, je peux m’en charger. Je travaille sur WordPress et Avada depuis plus de 11 ans.

• Pour un souci isolé : une intervention ponctuelle, à partir de 120 €/heure, sans engagement. Je trouve la cause et je corrige l’affichage mobile.
• Pour ne plus avoir à t’en occuper : ma maintenance de site WordPress prend en charge les mises à jour, la sécurité, les sauvegardes et les corrections, dès 60 €/mois pour un site vitrine et 90 €/mois pour une boutique WooCommerce.

Je reprends aussi les sites créés par quelqu’un d’autre : pas besoin que ton site ait été fait par moi.

Les captures des options et du Live Builder ont été faites sur webooste.com, sous Avada 7.16.2. Celles des outils Chrome et de PageSpeed viennent du tutoriel officiel d’Avada sur le responsive. Si tu veux voir les manipulations en direct :