Problème de responsive avec le thème WordPress DIVI

Mis à jour le 19/02/2020 | Publié le 13/03/2016 | 18 commentaires

Le responsive de DIVI et IOS9 ne font pas bon ménage !

Je reviens en forme après une formation très intense de 3 mois à la 3WAcademy, pour finir en beauté ma reconversion de Développeur-Intégrateur Web et bien-sûr j’ai fais le plein de sujets dont je souhaiterais aborder sur La Webeuse… Celui d’aujourd’hui n’est que le premier d’une longue série : donc n’hésitez pas à vous inscrire à ma newsletter ! 🙂

 

MAJ le 19/02/20 : Si vous souhaitez améliorer le responsive de Divi… Lisez mon article dédié à ce sujet sur le blog d’Astuces Divi. Toutes les options de responsive design et astuces y sont passées en revue.

 

Connaissez-vous Divi de Elegant Thème ?

Je voulais vous parler de Divi, le thème phare de Elegant Theme, l’une des plateformes de Thème Premium (comme ThemeForest) qui offrent un panel incroyable de thèmes à acheter pour créer son site web ou son blog sous WordPress (entre autres)… Divi est un thème « tous-terrains » qui offre une multitude de possibilités pour construire son site et en plus de manière responsive (c’est à dire adaptable à tous les écrans)…

 

Problèmes sous IOS9 ?

Peut-être utilisez vous Divi et peut-être avez-vous remarqué un soucis sur certaines pages de votre site via un iPhone tournant sous IOS9 … Si c’est votre cas et que vous avez envie de vous arracher les cheveux pour trouver la solution à ce problème : NO WORRIES ! Je vais vous donner une petite astuce qui devrait arranger tous ça…

 

Comment faire ?

Rendez-vous dans votre back-office de WordPress puis aller à Divi > Options du Thème > Intégration > Vérifier que l’option « Activer le code d’en-tête » est sur la position « activer » > puis à la ligne « Ajouter ligne de code à la < head > de votre blog » inscrivez ce petit bout de code :

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />

Enregistrez vos modifications puis allez vérifier sur votre iPhone si le problème a bien été résolu…

Dans le back-office :
divi backoffice

divi backoffice

Où mettre le code :
divi integration

divi integration

 

La preuve en image :

Avant l’intégration du code dans Divi, voilà à quoi ressemblait ma page sous IOS9 :
avant intégration du code

avant intégration du code

 

Et voilà la page après rectification, c’est mieux non ?
après intégration du code

après intégration du code

 

Attention, je parle de Divi car sur tous mes sites web, c’est le seul thème qui m’a posé un problème sous IOS9 mais je suis sûre que depuis la dernière mise à jour de APPLE, il y a certainement d’autres thèmes qui doivent en payer les frais… Avez-vous remarqué des problèmes similaires sur vos sites ? N’hésitez pas à les partager en commentaire de cet article !

 

MAJ le 14/12/17 : C’est tout nouveau, si vous utilisez le thème Divi, je vous invite à découvrir mon nouveau blog dédié à ce thème WordPress. Au programme : astuces, tips, tutoriels et ressources pour Divi.

 

Encore un peu de lecture ?

WP Staging : clonez votre site WordPress pour tester sereinement !

WP Staging : clonez votre site WordPress pour tester sereinement !

Ce n'est jamais une bonne idée d'effectuer des tests de code, de plugins ou de thème sur votre site en production. Il est généralement conseillé de réaliser ce type d'action sur un site de test. Bonne nouvelle ! WP Staging est une extension qui vous permet de cloner...

18 Commentaires

  1. Prez

    Bonjour et merci beaucoup pour ce conseil précieux. J’utilise divi dans sa dernière version pour créer mon site et je n’arrive pas à trouver comment faire pour que mes pages ne se transforment pas en fonction des navigateurs. Auriez vous des conseils à me donner. Merci beaucoup !

  2. Lycia

    Bonjour Monsieur Prez, merci pour votre commentaire… Concernant cet article, le test avait été sur une version antérieure à la version 3… Par contre pour vos soucis de navigateur que se passe-t-il exactement ?

  3. Justine

    Merci beaucoup, très utile ! J’avais un petit problème sur Iphone et hop résolu ! Au top un grand merci 🙂

  4. La Webeuse

    Super Justine… Ce tuto date un peu et pourtant il s’avère être toujours d’actualité ! Bonne continuation.

  5. Laurent

    Bonjour,
    J’utilise Divi pour wordpress, j’ai un pb de diffusion d’une vidéo qui se diffuse sur PC mais pas sur tablette et téléphone portable.
    Merci de votre aide

  6. La Webeuse

    Bonjour Laurent. Je ne sais pas, cela pourrait venir de nombreux paramètres. Avez-vous bien hébergé votre vidéo sur YouTube ou Viméo puis inséré le lien dans votre page (méthode recommandée), ou bien vous avez importé votre vidéo directement dans WP ???

  7. ais

    Bonjour,
    Merci pour ce bon tuyau !

    J’en profite pour vous demander si vous auriez-vous une solution à un autre problème : je cherche à afficher le titre des vidéos avec le module « Curseur de défilement vidéo »… Pour l’instant, je bidouille en mettant le titre dans l’image du diapo (mais pour le référencement, on repassera !)
    Merci pour votre retour.

  8. La Webeuse

    Bonsoir, non je n’ai pas vraiment essayé cela… j’essayerai de regarder et d’en faire un tuto sur astucesdivi.com

  9. KIRSHBOIM

    bonjour
    merci pour votre conseil il marche a merveille!

  10. La Webeuse

    Super, vous m’en voyez ravie 😉

  11. Boutaleb

    Bonjour la webeuse,
    Tout d’abord merci pour votre article.

    Je viens de me lancer sur Divi pour gagner du temps sur wordpress mais je ne maitrise pas encore assez.

    J’ai commencé un site web, sur ordinateur il est pas mal par contre sur mobile, les images et vidéos vont sur le côté gauche et impossible de les avoir au milieu.

    D’où le probléme peut venir ?

    J’ai essayé votre astuce malheureusement elle ne fonctionne pas.
    Est-ce du au layout que j’ai utilisé ?

    Votre site astuces Divi est pas mal du tout, je vais me former encore, à vouloir aller vite, on perd du temps parfois ahah

    Merci d’avance si vous avez réponse à mon soucis.

  12. La Webeuse

    Salut Boutaleb !
    Merci…
    Concernant ton histoire de responsive, as-tu regardé toutes les options du module « image » et même « vidéo ». De mémoire il y a une option du genre « toujours centrer sur mobile », est-elle bien cochée ? Sinon, tu devrais inspecter le code source de ta page pour voir s’il y a un souci quelque part…
    Bon courage !
    Lycia

  13. Damien MÉRUT

    Cela a résolut mon problème d’affichage sur mobile, merci.

  14. La Webeuse

    Super Damien !
    Même si cet article est vieux (l’un des plus vieux de ce blog), apparemment, l’astuce fonctionne toujours dans certains cas.

  15. Jacinthe

    Bonjour!
    J’ai terminé d’arranger tout mon site responsive mais voila qui a la page Confirmation de commande de ma boutique qui ne veut rien savoir de s’aligner au centre sur le cellulaire. C’est la seule et j’ai tout essayer. Peut-être existe-il un code à entrer dans le css ? Ou autre chose peut-être. Merci

  16. La Webeuse

    Salut Jacinthe. Je ne sais pas trop quoi te dire 😉
    Je me demande d’ailleurs si tu ne pourrais pas la faire avec le nouveau thème builder, ça règlerait peut-être le problème ? Mais je ne sais pas si c’est faisable… À voir 😉
    À bientôt
    Lycia

  17. Christophe

    Bonsoir,

    Je reviens vers vous car j’ai réussi à rectifier quelques décalages avec Divi mais j’ai toujours un problème d’affichages décalés entre mon Iphone et le Samsung de mon épouse. Et je ne vois pas comment résoudre ce problème sachant que je ne sais absolument pas coder.
    Votre aide me sera précieuse, par avance merci.

  18. La Webeuse

    Salut Christophe,
    Je crois que je viens de te répondre sur mon autre blog, Astuces Divi…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Pin It on Pinterest

Shares
Share This