[RÉGLÉ] Affichage en colonnes incorrect sur mobile (disparition de caractères)

[FlodAriege]

Bonsoir,

Ca fait un moment que j'ai remarqué que sur mon site rouchenergies(point)fr l'affichage des colonnes se fait très mal sur mon petit iphone4.
Bon, il faut quand même que je donne une URL, donc voici un exemple à tester sous l'inspecteur Mozilla ou sur votre smartphone : (lien supprimé)

Donc, dans cet affichage genre blog de catégories, je demande (à FlexiContent en l'occurrence, mais sur Joomla natif il y a les mêmes réglages je crois) d'afficher 1 article en pleine largeur, et les suivants sur 2 colonnes.

En dessous d'une largeur d'environ 440p, l'affichage des 2 colonnes dysfonctionne : d'abord le texte se fait "manger" par le bord droit, puis en dessous de 415p, l'affichage ne se fait plus que sur 1 seule colonne mais... pas sur toute la largeur du petit écran, non, ça laisse un grand vide à droite de l'écran. Et une bonne partie du texte disparaît sur le bord droit de l'article.

J'ai un début de piste, mais vu mes (in)compétences, ça ne me mène nulle part :
Je me souviens qu'à une époque la photo que je mettais en début d'article mesurait 400 pixels de large. Mais il manquait toujours 2 ou 3 lettres à la fin de chaque ligne de l'article présenté en colonnes.
Et j'avais remarqué qu'en descendant la largeur de la photo à 380 pixels, le problème disparaissait.
Probablement que sur mon écran 1600x900, les colonnes doivent mesurer 400 pixels, moins les "marges".

Or sur mobile le problème est un peu identique : sur les articles présentés en 2 colonnes, la photo mesure 200 pixels de large.
Sauf sur l'article "Pourquoi une pompe à chaleur-air-eau est-elle si économique ?", où l'image est plus large et où, du coup, le problème d'affichage survient plus tôt (en largeur d'écran).

Que puis-je faire pour que cet affichage soit réellement "responsive" ?
A part diminuer la taille de toutes mes images bien sûr (solution ultime, pénible et longue, et pénalisante pour les grands écrans, mais s'il n'y a pas d'autres moyens, j'y viendrai).

Ah oui, faut pas que j'oublie de préciser que pour afficher mes photos, j'utilise sigplus. (mais je ne crois pas que ça change quoi que ce soit, car sur la page susmentionnée, par exemple, la capture d'écran de vidéo YouTube de l'article "Pourquoi choisir un professionnel RGE QualiBois ?" est tout bêtement une image, placée là "en dur", et pas via sigplus. Eh bien le problème d'affichage est identique.

Voilà, si quelqu'un a une petite idée de ce que je peux faire, par exemple, pour forcer l'affichage en une seule colonne plein écran en dessous de 440p, ça m'intéresse (mais attention, je suis une bille en css )

Merci

[PhilJ]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

Essayer ceci (dans custom.css) :

#flexicontent ul.introblock.two > li {
width: auto;
}

...ceci est remplacement de 48% à la ligne 206 de /components/com_flexicontent/templates/blog/css/category.css.

[FlodAriege]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

Essayer ceci (dans custom.css) :

#flexicontent ul.introblock.two > li {
width: auto;
}

...ceci est remplacement de 48% à la ligne 206 de /components/com_flexicontent/templates/blog/css/category.css.

Bouhouhouuuu ça maaarche paaaaaaaaaas

Dommage, j'aurais bien aimé, mais tout ce que ça fait, c'est que l'affichage se fait en une seule colonne.

MAIS:

Alors que le problème d'affichage est toujours visible sur l'inspecteur Mozilla, sur mon iPhone le problème est à moitié résolu.
Pourquoi ?
Peut-être parce que je viens de mettre à jour le Template Framework ?

Donc désormais, la nouvelle description du problème serait : la moitié de l'écran est gâchée en dessous d'une "certaine" largeur (en tout cas sur mon iphone4) par l'affichage en 2 colonnes, la moitié droite de l'écran restant désespérément vide.
Mais par contre, l'image se redimensionner désormais automatiquement à la bonne largeur, et le texte n'est plus mangé sur le bord droit.
C'est déjà ça.
Je ne sais pas ce que ça donne sur d'autres tailles d'écran, car sur le coup l'inspecteur Mozilla n'est pas très fiable.

Ce qu'il faudrait, c'est un code qui dise à FlexiContent d'afficher les blogs de catégorie sur une seule colonne, mais seulement en dessous d'une certaine taille d'écran. (probablement autour de 420 pixels).

[PhilJ]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

...Une chose est sûre : ces petites bêtes sont des ordinateurs, avec système d'exploitation et navigateur(s). Donc elles fonctionnent comme des ordinateurs. En particulier, leur navigateur met en cache certaines données, exactement comme un PC de bureau ou un PC portable. Et (re) donc : il faut vider le cache de la petite bête pour être sûr que

Bouhouhouuuu ça maaarche paaaaaaaaaas

Si tu ne sais pas faire : Google + requête 'vider le cache iphone'.

Pour rappel, sur PC, il suffit de faire CTRL+F5 (au lieu de F5) pour rafraîchir la page courante avec un cache vierge.

[FlodAriege]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

...(...) il faut vider le cache de la petite bête pour être sûr que

(ça ne marche pas)

Non non, pas un problème de cache, tu m'as mis un doute, donc j'ai refait le test : je maintiens. Ca bascule en une seule colonne au lieu de 2, that's it.

[lefabdu51]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

c est pas le comportement standard du template pour cette resolution, de tout mettre sur une colonne?

[FlodAriege]

Affichage en colonnes incorrect sur mobile (disparition de caractères)

Non, et c'est bien dommage, ce serait tellement plus lisible.
Au moins depuis la mise à jour du framework le texte s'affiche en entier et l'image (dans une balise siplus) se redimensionne mais… tiens, attends, je te mets une capture d'écran.
[EDIT: je viens de remarquer que la disparition de caractères et le rognage de l'image continuait à se produire en une seule occasion. 2 en fait : quand, avant le readmore, j'ai du texte 'blockquote' ou 'text-info'… bizarre non ?]
Et une autre en mode paysage (beaucoup mieux).

Il faudrait un code qui dise : si largeur < 440pix alors override le paramètre "2 colonnes" dans vue catégorie.
C'est possible ?
Sinon j'ai commencé à regarder du côté d'une nouvelle extension JSN : JSN Mobilize, qui crée un 'template' pour les mobiles et les tablettes. Je trouverais un peu dommage de devoir ajouter encore une extension alors qu'il n'y a qu'un seul paramètre qui pose souci à JSN BOOT en affichage mobile, mais d'un autre côté ce serait peut être mieux, je ne sais pas…


Sent from my iPhone using Forum Joomla.fr mobile app

[lefabdu51]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

theoriquement il est responsif ce template....

Donc la il faudrais savoir quelles sont les css utilisées pour les petites dimension....celles de flexi ou celles du template?

[PhilJ]

Bonjour,

Je trouverais un peu dommage de devoir ajouter encore une extension alors qu'il n'y a qu'un seul paramètre qui pose souci à JSN BOOT en affichage mobile

...Oui et non.

Oui, il serait dommage de devoir surcharger encore le site avec une nouvelle extension — qui plus est sans aucune garantie de succès.

Non, car rien ne dit que le souci vienne du template lui-même. Il est tout à fait possible que le souci soit avec FlexiContent (j'ai déjà souligné ce point dans un précédent post du même fil).

Ces deux réponses sont liées, car JSN Boot est prévu pour la mobilité. Si pour une raison ou une autre (= le template, ou Joomla, ou FC, ou n'importe quoi d'autre) il faut ajuster, il serait bien étonnant qu'une extension réussisse à le faire là où le template, déjà responsive, est pris en défaut.

Il faudrait un code qui dise : si largeur < 440pix alors override le paramètre "2 colonnes" dans vue catégorie. C'est possible ?

Tout est possible, mais, comme on dit, ce n'est pas le tout. Il faut aussi que ce soit souhaitable.

=> Soyons clair, et lefabdu51 a là aussi tout à fait raison : avec une largeur de 320 px seulement (iPhone portrait), il ne parait guère raisonnable de souhaiter afficher en multi-colonne, avec des images toute petites et 5 ou 6 mots par ligne, même si on trouve (de loin ?) cette disposition « plus jolie ». De mon côté je ne connais aucun site « mobilisé » affichant plusieurs colonnes en 320 px (= en réalité 320 moins les marges latérales).

Cela étant dit, et même en considérant que chacun voit midi à sa porte, la pièce jointe (http://forum.joomla.fr/attachment.ph...chmentid=27871) montre une seule colonne, mais nettement trop étroite — probablement 2 fois trop étroite (width 48% probablement). Il s'agit d'une anomalie avérée. Quelle est l'URL ?

je viens de remarquer que la disparition de caractères et le rognage de l'image continuait à se produire en une seule occasion. 2 en fait : quand, avant le readmore, j'ai du texte 'blockquote' ou 'text-info'

S'agit-il d'un assemblage Joomla ou FC ?


=> Ce qu'il nous faudrait, pour t'aider, ce sont des adresses / URL précises (= à partir de /index.php/...) où tu vois des anomalies de ce genre (c'est-à-dire une seule colonne sur la moitié de la largeur de l'écran, ou bien des images incomplètes, etc.).

[FlodAriege]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

On est bien d'accord : je voudrais bien que l'affichage se fasse sur une seule colonne (pleine largeur bien sûr) des que l'écran est trop étroit !
Je pense que le paramètre à outrepasser est un paramètre de FlexiContent qui se règle dans le 'template' vue catégorie (exactement comme on le fait sous joomla) : en vue catégorie, 1 article pleine largeur, les suivants sur 2 colonnes. C'est ça qu'il faudrait changer en introduisant un code qui dirait "sauf si écran inférieur à 440pix".
Sur l'URL suivante, le 2ème article (= le 1er article sur ce qui devrait être 2 colonnes si on était sur écran large), celui sur les principes généraux, a des caractères disparus sur la droite + image rognée (car text-tip avant readmore) :

/index.php/photovoltaique-en-autoconsommation

J'espère que ça te permettra de trouver quelque chose
Merci !


Sent from my iPhone using Forum Joomla.fr mobile app

[PhilJ]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

Re,



Merci de réessayer ceci, en fin de custom.css (pour tout smartphone) :

/* -------- BEGIN MEDIA QUERY -------- */

@media screen and (max-width: 767px) {

#flexicontent ul.introblock.two > li {
width: auto; /* au lieu de 48% */
}

}
/* --------- END MEDIA QUERY --------- */

Il n'y a aucune raison que ça ne marche pas. Ça marche très bien dans l'outil FF, et idem avec les quirktools.

IMPORTANT : ne pas oublier la 2^e accolade fermante à la fin en copiant le code ci-dessus (et de vider le cache si nécessaire).


_____________

Si malgré tout ça ne marche pas, dis-le nous mais stp sans retirer cette directive, de façon à pouvoir comprendre ce qui se passe. Une copie d'écran pourra aussi être utile.

_____________

Si ça marche mais que préfères tout de même avoir 2 colonnes sur smartphone en mode paysage, remplace :

@media screen and (max-width: 767px)

par :

@media screen and (max-width: 479px)

[lefabdu51]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

avec une largeur de 320 px seulement (iPhone portrait), il ne parait guère raisonnable de souhaiter afficher en multi-colonne, avec des images toute petites et 5 ou 6 mots par ligne, même si on trouve (de loin ?) cette disposition « plus jolie ». De mon côté je ne connais aucun site « mobilisé » affichant plusieurs colonnes en 320 px (= en réalité 320 moins les marges latérales).

en plusieures colonnes sur une resolution aussi petite, tu risque de donner du boulot aux opticiens (ou de faire pleurer les gens), vu que cela serat completement illisible....

[FlodAriege]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

en plusieures colonnes sur une resolution aussi petite, tu risque de donner du boulot aux opticiens (ou de faire pleurer les gens), vu que cela serat completement illisible....

Heu…sans vouloir te contrarier …
Non. Pas d'ac.
Une ligne de 150 pix de long avec 2 ou 3 mots ou une ligne de 300 pix avec 4 ou 6 mots…
… ça ne change pas la taille des caractères.

Par contre on est bien d'accord : 2 colonnes sur un smartphone, c'est naze.
C'est pour ça que j'ai demandé de l'aide …



Sent from my iPhone using Forum Joomla.fr mobile app

[FlodAriege]

Re : Affichage en colonnes incorrect sur mobile (disparition de caractères)

Re,



Merci de réessayer ceci, en fin de custom.css (pour tout smartphone) :

/* -------- BEGIN MEDIA QUERY -------- */

@media screen and (max-width: 767px) {

#flexicontent ul.introblock.two > li {
width: auto; /* au lieu de 48% */
}

}
/* --------- END MEDIA QUERY --------- */

Il n'y a aucune raison que ça ne marche pas. Ça marche très bien dans l'outil FF, et idem avec les quirktools.

... et d'ailleurs, ça marche parfaitement.
Oui :
Ca maaaaaaaaaarche !

Donc le moment est venu de me griller avec quelques contributeurs à qui j'ai déjà fait cette proposition (je pense à cavo, pieceofcake et même peut-être toi déjà ?) :
Je suis tellement contente ....
... veux-tu m'épouser ?
(heureusement que mon mari a le sens de l'humour...)

Quoi qu'il en soit, merci encore, merci 1000 fois pour ton aide : depuis le temps que je m'agaçais de voir cet affichage tout pourri sur mon petit écran, je suis vraiment enchantée

A force je vais finir par comprendre comment fonctionnent les css : un petit bidouillage par ci, un petit ajout par là, toujours pour résoudre des cas concrets qui me tiennent à cœur : rien de tel pour avoir envie d'apprendre.
Je pars en vacances bientôt : je me demande même si, plutôt qu'un roman policier, je n'emmènerais pas un bon gros bouquin "le css pour les nuls". Heu... naaaaaaaaaaan, faut pas d*** quand même

MERCI PhilJ !

[PhilJ]

Bonjour,

ça marche parfaitement.

...Donc la première solution proposée était la bonne. C'est en effet ici exactement la même que précédemment. Je n'avais pas mémorisé le code (bien sûr), mais je me suis aperçu, juste au moment du 2e envoi, que je te proposais très exactement le même code. C'est pourquoi j'ai écrit « Merci de réessayer... ».

Ouf.

Moi qui n'ai pas de chapeau, j'ai failli devoir en acheter un. Pour le manger.

Je suis tellement contente ....
... veux-tu m'épouser ?

Ça chauffe chez RouchEnergies !

Alors pour te répondre, euh :

1. Je suis déjà marié.
2. J'ai demandé à mon épouse. Elle n'est pas d'accord.
3. Mes enfants sont un peu réticents aussi.
4. La polygamie est interdite en France.
5. Je ne connais pas ton mari, ni suffisamment Cavo et PieceOfCake pour vivre avec eux.
6. J'ai déjà pas mal de frais.
7. Il y a sûrement d'autres raisons.

Mais c'est quand même gentil.

Je pars en vacances bientôt : je me demande même si, plutôt qu'un roman policier, je n'emmènerais pas un bon gros bouquin "le css pour les nuls". Heu... naaaaaaaaaaan, faut pas d*** quand même

MERCI PhilJ !

Alors bonnes vacances !

Pour les CSS, dis-toi qu'au cours de l'été ça veut seulement dire : les vacances, « Ce Sera Super ! »


Amicalement,



PhilJ