Connexion à votre interface Wifeo
X
Nom d'utilisateur :
Mot de passe :


Mot de passe oublié ?

Pas encore inscrit ? Créez votre site gratuitement !
Connexion
 FERMER LE MENU


Menu du forum :

Accueil du forum

Derniers messages

S'inscrire au forum

Se connecter au forum

Mot de passe oublié

Menu général de Wifeo :

Accueil de Wifeo

Connexion

Créer un site

Nouveautés Wifeo

Blog

Forum

Boite à outils

Documentations

Responsive sur le design > Difficulté pour l'affichage sur mobile

Connectez-vous au forum     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite

Difficulté pour l'affichage sur mobile

Répondre
La question
Posté le 15 Février 2018 à 17:31
samzia

107 messages
Inscrit le 4/11/2011
Mon site
Bonjour,
Je rencontre de grosses difficultés pour maîtriser l'affichage de mon site http://www.nouvellestechnologies.net/ sur mobile. J'ai placé la balise <meta name="viewport" content="width=device-width"/> entre les balises HEAD de ma page d'accueil, et retravaillé la taille des textes pour qu'ils soient bien visibles sur smartphone. J'ai également masqué le menu "ordinateur", et conçu un menu dans la section "menu pour mobile". Quand je teste l'affichage sur mon smartphone (LG G3), tout est bien lisible. Mais quand je teste ma page d'accueil avec l'outil de Google sur https://search.google.com/test/mobile [...] ect&hl=fr, ou encore sur le site http://www.emulateurmobile.com/, le contenu de la page est coupé, et Google me dit que la page n'est pas adaptée aux mobiles, avec comme raisons principales un contenu plus large que l'écran, et des éléments cliquables trop rapprochés. Que dois-je faire pour que Google considère que l'ergonomie mobile est optimisée?
J'ai testé le design simplifié pour une prise en charge automatique du responsive design, mais le résultat est catastrophique, avec seulement la moitié gauche de la page qui s'affiche.
Autre problème majeur que je rencontre uniquement sur mobile, et ce quelque soit le navigateur (Chrome, Edge, Firefox), les images s'affichent uniquement quand je défile la page vers le bas. Sans cette manip' sur écran tactile, les images laissent place à de gros espaces blancs.
Samuel.

 
Navigateur utilisé : Firefox

 
Posté le 16 Février 2018 à 9:44
gabriel-support

Bonjour,

La balise viewport est présente de vos pages par défaut, il n'est pas nécessaire de la rajouter par vous même.

La page n'est pas adaptée aux mobiles car vous avez le corps de la page qui est dans un tableau qui fait 1000 pixels de large.

Idem pour l'entête.

Vous avez aussi des images qui ont une largeur fixe à 1000 pixels.

Pour que cela soit compatible mobile, il faut que la largeur s'adapte à la largeur de l'écran.

Pour cela, il faut définir une largeur de 100% et une largeur maximum de 1000 pixels.

Essayez la classe suivante :

body > table{
width:100%!important;
max-width:1000px!important;

}

Mais pas certain que cela soit suffisant car il y a peut-etre d'autres choses qui élargissent la page.

Savez vous comment faire ?

Pourquoi ne pas utiliser le design simplifié de Wifeo ?

 
Navigateur utilisé : Chrome

 
Posté le 16 Février 2018 à 16:59
samzia

107 messages
Inscrit le 4/11/2011
Mon site
Bonjour,
Où dois-je mettre la classe que vous proposez?
Pour le design simplifié, comme je vous l'ai déjà dit dans mon post précédent, le résultat est pire, avec une moitié gauche de la page qui s'affiche.
Samuel

 
Navigateur utilisé : Firefox

 
Posté le 16 Février 2018 à 19:53
gabriel-support

Bonsoir,

Il faut le mettre dans la zone CSS de votre template de design.

 
Navigateur utilisé : Chrome

 
Posté le 16 Février 2018 à 20:18
samzia

107 messages
Inscrit le 4/11/2011
Mon site
Déja essayé, ça ne fonctionne pas.

Dans ma zone CSS de mon template de design, il y a actuellement le code suivant.

body {
background-image:url http://lesnouvellestechnologies.wifeo [...] eu-nt.jpg);
background-size: cover;
background-repeat:no-repeat;
background-attachment:fixed;
height: 100%;
background-color:#c7bd89;
margin:0;
}

 
Navigateur utilisé : Firefox

 
Posté le 19 Février 2018 à 8:23
gabriel-support

Pouvez vous ajouter, en dessous :

body > table{
width:100%!important;
max-width:1000px!important;

}

 
Navigateur utilisé : Chrome

 
Poster une nouvelle réponse
Connectez-vous au forum pour pouvoir répondre     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite
Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES