ELEMENTOR : Comment corriger le problème de décalage d’affichage sur mobile et tablette

comment corriger les problème de décalage de page sur mobile et tablette sur ELEMENTOR
Nous allons voir les étapes pour corriger de manière efficace le décalage des pages sur ELEMENTOR lors du basculement sur le format mobile et tablette.

Partager cet article

Raphael BOUMEJAHED

Raphael BOUMEJAHED

Table des matières

ELEMENTOR : Comment corriger les problèmes de décalage d'affichage sur mobile/tablette ?

MAJ 08/02/23 : Attention au animations filtres CSS si vous créez des animations au survol ou avec le défilement, les médias sortent de leurs conteneurs et ils créent un décalage. Veillez à masqué les débordement si cela ne vous masque pas de contenu.

1) Mettez-vous sur la page concernée

Nous allons d’abord allez sur la page concernée par ce problème d’affichage, ensuite le but est de pouvoir identifier quels éléments sont en dehors du format et qui créent un décalage sur le coté lors de la navigation sur mobile. 

Passons ensuite à la partie inspection

comment inspecté l'élément avec clique droit

2) Faites inspecter l'élément pour avoir accès à l'outil de dev de Google.

comment inspecté l'élément avec clique droit

Rendez-vous dans la partie dev de google en faisant clic droit puis inspecter l’élément puis allez dans le mode responsive dans l’onglet « CONSOLE ». 

Une fois le mode responsive activé et le code collé vous pouvez passer à l’étape suivante

etapes 3 coller le code pour identifier les elements hors cadre

3) Copier coller l'un des deux codes dans la rubrique "CONSOLE" sur l'outil DEV.

Dans la rubrique console collez l’un des deux codes puis cliquez sur entrer afin de découvrir le découpage en section encadrer en rouge. 

etapes 3 coller le code pour identifier les elements hors cadre

Premier code :

(function (debug) {
    var w = debug.documentElement.offsetWidth,
        t = debug.createTreeWalker(debug.body, NodeFilter.SHOW_ELEMENT),
        b;
    while (t.nextNode()) {
        b = t.currentNode.getBoundingClientRect();
        if (b.right > w || b.left < 0) {
            t.currentNode.style.setProperty('outline', '1px dotted red', 'important');
            console.log(t.currentNode);
        }
    };
}(document));
 

Deuxième Code :

javascript:(function(debug){var w=debug.documentElement.offsetWidth,t=debug.createTreeWalker(debug.body,NodeFilter.SHOW_ELEMENT),b;while(t.nextNode()){b=t.currentNode.getBoundingClientRect();if(b.right>w||b.left<0){t.currentNode.style.setProperty('outline','1px dotted red','important');console.log(t.currentNode);}};}(document));
 

4) Identification des éléments en dehors du cadre

Identifiez quels éléments semblent dépasser du cadre de la page, ce sont ces éléments qu’il faut corriger. 

étapes cadres naviguer pour voir les elements en dehors du cadres
étape 4 identifier les élément qui dépassent

5) Correction des éléments débordants

Pour corriger les éléments qui créé le décalage, il vous faut aller dans l’éditeur ELEMENTOR sur la page dans les paramètres du conteneur, dans la rubrique « débordement » sélectionnez l’option « Masqué » et le tour est joué ! 

Répétez l’opération si d’autres éléments posent encore problèmes jusqu’à ne plus avoir de décalage sur votre page lors du basculement sur mobile. 

étape 5 comment corriger les éléments qui dépassent

Conclusion :

En optant pour cette méthode vous garantissez la bonne mise en page de votre site sur mobile, il est également possible de modifier ce problème via l’utilisation d’un code CSS mais le code css risque a terme de vous poser problème. 

 

Découvrez l’outil ELEMENTOR et notre chaine YOUTUBE 

 

Vous souhaitez mettre un site internet en place faites appel à nos services.

Vous voulez être informé(e) de nos dernières astuces

Inscrivez-vous pour recevoir nos astuces du mois, c'est promis pas de mail inutile

Découvrir nos autres astuces

Projets Clients

Création E-commerce coaching sportif

Création d’un e-commerce coaching sportif, coachcharlie.fr un projet de création d’e-commerce dans le monde du coaching sportif, simplifier votre processus de vente

Vous avez un projet ?

Faites nous part de vos besoins

small_c_popup.png

Vous souhaitez être contacté(e) par un(e) conseillé(ère)

Entrez votre nom et vos coordonnées :