AVADA : Soucis d'affichage sur mobile

WordPress :5.4
Statut : non résolu

Ce sujet contient 6 réponses, 4 participants et a été mis à jour pour la dernière fois par Klerdesign, le il y a 3 années.

7 sujets de 1 à 7 (sur un total de 7)

Auteur

Messages
26 août 2020 à 19 h 09 min #2351958
AXIOME
Participant

Initié WordPress
15 contributions
Bonjour,

Ma configuration WP actuelle
- Version de PHP/MySQL : Ionos… last one ? 🙂
- Thème utilisé : AVADA
- Extensions en place : Rien de spécial
- Nom de l’hébergeur : Ionos
- Adresse du site : http://s822237296.onlinehome.fr/
Problème(s) rencontré(s) :

Bonjour,

J’ai réalisé pour une amie un site pour son activité d’ostéopathe. Seulement, la version mobile s’adapte trés mal. Les photos en haut de chaque page disparaissent sur la version mobile……. et certaines (notamment tarifs, contact), comportent des infos très importantes. Sauriez-vous m’aider à régler ce problème svp ?

ACCUEIL

Merci beaucoup pour votre retour, j’ai hâte de vous lire !

Maxime
28 août 2020 à 12 h 41 min #2352083

Rock4Temps
Participant

Maître WordPress
869 contributions

Bonjour,

Le théme Avada a son propre constructeur de page.

Je ne connais pas Avada mais je pense que comme tous les contructeurs il doit y avoir des options avancées de visibilté pour masquer certains éléments sur mobile.

C’est ce qui apparait quand on inspecte le code , certains éléments sont masqués par la régle CSS:

Display: none

Cordialement

29 août 2020 à 8 h 56 min #2352167
Rock4Temps
Participant

Maître WordPress
869 contributions
Bonjour

A partir du back office de WordPress
menu Apparence > personnaliser > css additionnel entrez le code ci dessous:
```
@media screen and (max-width: 640px)
body:not(.fusion-builder-ui-wireframe) .fusion-no-small-visibility {
    display: block !important;
}
```
cordialement
30 août 2020 à 18 h 21 min #2352263

AXIOME
Participant

Initié WordPress
15 contributions

Bonjour Rock4Temps,

Merci beaucoup pour votre temps, c’est super sympa… ! Hélas, ça ne marche pas… 🙁

Apparemment ce sont les images de fond (méthode que j’ai utilisé en tant que novice…) qui disparaissent dès que la taille d’écran est réduite.

J’essaye de trouver mais je ne vois aucun tuto pour le moment…

Merci en tout cas pour votre réponse.

A bientôt,

Maxime

30 août 2020 à 19 h 06 min #2352269
ferman
Participant

Maître WordPress
6518 contributions
Bonjour,

Je n’ai pas vérifié l’incidence sur tout le site mais chez moi ça marche avec ce code CSS.
```
@media screen and (max-width: 640px) {
 body #wrapper:not(.fusion-builder-ui-wireframe) .fusion-no-small-visibility {
  display: block !important;
 }
}
```
Il faut ajouter une précision (#wrapper) pour surpasser le code initial, déjà avec un !important.
- Cette réponse a été modifiée le il y a 3 années et 3 mois par ferman.
30 août 2020 à 19 h 13 min #2352273

AXIOME
Participant

Initié WordPress
15 contributions

Génial, cela fonctionne. Merci mille fois ! 🙂

26 novembre 2020 à 21 h 56 min #2360936

Klerdesign
Participant

Initié WordPress
33 contributions

Bonjour,

La méthode de ferman est correcte, mais elle surpasse le code CSS de Fusion Builder. Dans Avada, tu as la possibilité de chosir si un élément s’affiche ou non sur la version mobile, voire de changer l’apparence complète d’un conteneur et de tous les éléments qu’il contient. Je sais je suis un peu en retard mais ton problème venait certainement de là. Première question à se poser : est-ce que ton conteneur était réglé sur « flex » ou « legacy » ? Deuxième question : avais-tu vérifié les option de visibilité de ton conteneur : « small screen » et « all screen » ?
Auteur

Messages