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 des images > Photos tronquées

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

Photos tronquées

La question
Posté le 26 Septembre 2017 à 23:20
ladycut

67 messages
Inscrit le 9/9/2014
Bonjour,

J'ai 4 photos sur ma page d'accueil qui ne s'adaptent pas sur mobile malgré le paramétrage "wr_100prct" . 2 d'entre elles sont coupées en haut et en bas ce qui donne un affichage en "bandeau".

De plus, j'ai du supprimer le texte dans les photos parce que la transformation en colonne "wr_tabletransline" ne s'est pas appliqué.

Que dois-je faire ? merci de votre réponse.

Voir mon site

 
Navigateur utilisé : Firefox

La réponse qui règle le problème
Posté le 28 Septembre 2017
gabriel-support

Bonsoir,

La solution, alors, pourrait être de mettre sur les textes présents sur les images la class "wr_dsplymbl" (classe qui fait disparaître l'élément sur mobile).

Et de dupliquer ces textes aux endroits ou ils doivent être sur mobile, et appliquer dessus la class "wr_dsplypc" (class qui fait disparaître l'éléments sur ordinateur).

Savez vous faire cela ?
 
Navigateur utilisé : Chrome


 
Posté le 27 Septembre 2017 à 8:35
gabriel-support

Bonjour,

En fait la class wr_100prct permet de mettre un élément à 100% sur mobile.

Vous l'avez appliquée sur le tableau qui contient l'image, qui est il est déjà à 100% sur pc, donc cette class n'a pas d'effet là ou elle est.

Le problème vient du fait que votre image est en image de fond. Hors, une image de fond ne peu pas impacter la hauteur de son conteneur (le tableau).

Cette class va par ailleurs traiter la hauteur prévue surtout pour être placée directement sur des images, et non du des tableaux (du coup elle a des effets indésirables lorsqu'elle est appliquée sur des tableaux, comme retraiter la hauteur en lui mettant la valeur "auto").

Dans votre cas, je penses que retirer la class wr_100prct des tableaux résoudra le problème

Par ailleurs, je vois que vous avez mis la class "wr_dsplymbl" sur les conteneurs des textes qui apparaissent par dessus les images. Cette class fait disparaitre l'élément sur mobile. Du coup les textes ne sont plus visibles sur mobile (mais peut-être est-ce normal).

Si vous éprouvez des difficultés pour faire ces modifications n'hésitez pas à revenir vers moi

 
Navigateur utilisé : Chrome

 
Posté le 27 Septembre 2017 à 19:41
ladycut

67 messages
Inscrit le 9/9/2014
Bonjour Gabriel et merci de votre retour. J'ai effectivement opter pour des images de fond afin d'intégrer le texte sur l'image. S'il y a une autre méthode, je suis preneuse !

J'ai supprimé le "wr_100prct" et ça fonctionne sur les images.

Pour conserver le texte j'ai sélectionné "en colonne", mais ça fait n'importe quoi, peut être parce que le texte n'est pas toujours positionné en haut à gauche ?

Par contre, sur mon smart phone, il y a un espace "blanc" important (entre la 1ere et la 2eme photos) comme si il y avait des sauts de lignes....

Bref c pas tip top...Je veux bien votre avis d'expert car je ne vois pas de solutions qui soient à ma portée. Sinon, c'est pas grave, je reverrais ma mise en page....

 
Navigateur utilisé : Firefox

 
Posté le 27 Septembre 2017 à 21:51
gabriel-support

Effectivement , la mise en colonne n'est pas adaptée à une telle utilisation.

En fait, quelle mise en page souhaitez-vous sur mobile ?

 
Navigateur utilisé : Chrome

 
Posté le 28 Septembre 2017 à 11:07
ladycut

67 messages
Inscrit le 9/9/2014
Je souhaiterais que le texte soit en haut ou en bas de la photo auquel il se rapporte (sur 100% de la largeur, avec des espaces réguliers). Comme sur la première photos.

Je n'ai toujours pas compris pourquoi cela fonctionne uniquement sur cette première photo et pourquoi je n'ai pas été capable de l'appliquer aux autres ? Que de mystères !

 
Navigateur utilisé : Firefox

 
Posté le 28 Septembre 2017 à 21:32
gabriel-support

Bonsoir,

La solution, alors, pourrait être de mettre sur les textes présents sur les images la class "wr_dsplymbl" (classe qui fait disparaître l'élément sur mobile).

Et de dupliquer ces textes aux endroits ou ils doivent être sur mobile, et appliquer dessus la class "wr_dsplypc" (class qui fait disparaître l'éléments sur ordinateur).

Savez vous faire cela ?

 
Navigateur utilisé : Chrome

 
Posté le 29 Septembre 2017 à 23:41
ladycut

67 messages
Inscrit le 9/9/2014
C'est juste parfait Gabriel, ça fonctionne très bien ! Merci beaucoup pour ce jeux de passe-passe !
 
Navigateur utilisé : Firefox

 
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