Problème d'affichage formulaire sur version mobile d'un site

Résolue
Highlighted
Nouveau contributeur

Bonjour,

 

J'ai crée un formulaire de contact Hubspot pour le mettre en place sur mon site. J'ai donc intégré le code court du formulaire dans une section de mon site (wordpress). 

 

Sur ordinateur le formulaire s'affiche parfaitement et fonctionne très bien (voir screenshot 1) mais sur téléphone le formulaire ne s'affiche pas du tout (voir screenshot 2).

 

J'aimerais savoir comment régler ce problème. Je vous donne l'URL où vous pourrez retrouver ce formulaire : https://grasp-agency.fr/contact

 

Merci d'avance,

 

Cordialement,

 

Jules

 

Screenshot 1Screenshot 1Screenshot 2Screenshot 2

 

0 Votes
1 Solution acceptée

Solutions approuvées
Highlighted
Solution
Modérateur HubSpot

Bonjour @Jules33 , 

 

Il semble que le problème soit lié au style injecté par la librairie d'Elementor sur votre template. Je ne connais pas vraiment cet éditeur et les options proposées, mais on peut voir que des marges fixes exprimées en pixel entourent le conteneur du formulaire 

.elementor-797 .elementor-element.elementor-element-921defe > .elementor-widget-container {
    margin: 50px 250px 0px 250px;
}

Peut-être avez-vous directement défini ces valeurs sur le module dans l'éditeur de la page? 

Un quick fix possible serait d'utiliser le code ci-dessous, mais j'ignore si cela peut s'implémenter facilement.

.elementor-797 .elementor-element.elementor-element-921defe > .elementor-widget-container {
    width: 50%;
    margin: auto;
}


Elementor propose son propre support et sa documentation, mais je n'ai pas trouvé d'informations pertinente avec les éléments en ma possession. Ils seraient sans doute une meilleure ressource pour vous ici (Hubspot n'a de contrôle que sur le chargement du formulaire, pas sur son agencement sur votre page Wordpress)

Voir la solution dans l'envoi d'origine

2 Réponses
Highlighted
Solution
Modérateur HubSpot

Bonjour @Jules33 , 

 

Il semble que le problème soit lié au style injecté par la librairie d'Elementor sur votre template. Je ne connais pas vraiment cet éditeur et les options proposées, mais on peut voir que des marges fixes exprimées en pixel entourent le conteneur du formulaire 

.elementor-797 .elementor-element.elementor-element-921defe > .elementor-widget-container {
    margin: 50px 250px 0px 250px;
}

Peut-être avez-vous directement défini ces valeurs sur le module dans l'éditeur de la page? 

Un quick fix possible serait d'utiliser le code ci-dessous, mais j'ignore si cela peut s'implémenter facilement.

.elementor-797 .elementor-element.elementor-element-921defe > .elementor-widget-container {
    width: 50%;
    margin: auto;
}


Elementor propose son propre support et sa documentation, mais je n'ai pas trouvé d'informations pertinente avec les éléments en ma possession. Ils seraient sans doute une meilleure ressource pour vous ici (Hubspot n'a de contrôle que sur le chargement du formulaire, pas sur son agencement sur votre page Wordpress)

Voir la solution dans l'envoi d'origine

Highlighted
Nouveau contributeur

Bonjour @Theo_B 

 

J'avais en effet défini ces valeurs moi-même dans Elementor. J'ai supprimé les marges droite et gauche de 250px et c'était bon ! Le formulaire s'affiche maintenant sur la version mobile.

 

Merci beaucoup pour m'avoir délivré de ce problème 🙂

 

Bonne journée

 

Jules

0 Votes