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

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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 : http://www.rouchenergies.fr/index.ph...bois-a-pellets

    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
    Dernière édition par FlodAriege à 06/08/2014, 19h56 Raison: Solution apportée par PhilJ :)

  • #2
    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.
    Dernière édition par PhilJ à 03/08/2014, 15h54
    Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

    Commentaire


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

      Envoyé par PhilJ Voir le message
      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).

      Commentaire


      • #4
        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

        Envoyé par FlodAriege Voir le message
        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.
        Dernière édition par PhilJ à 03/08/2014, 18h07
        Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

        Commentaire


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

          Envoyé par PhilJ Voir le message
          ...(...) 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.

          Commentaire


          • #6
            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?
            Mon site en cours de construction avec de nouvelles catégories de documents...
            https://informaticien51.fr

            Commentaire


            • #7
              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. Cliquez sur l'image pour l'afficher en taille normale

Nom : ImageUploadedByForum Joomla.fr1407132973.982724.jpg 
Affichages : 1 
Taille : 195,2 Ko 
ID : 1803600
              [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).
              Cliquez sur l'image pour l'afficher en taille normale

Nom : ImageUploadedByForum Joomla.fr1407133041.881918.jpg 
Affichages : 1 
Taille : 90,8 Ko 
ID : 1803601
              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
              Dernière édition par FlodAriege à 04/08/2014, 08h18

              Commentaire


              • #8
                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?
                Mon site en cours de construction avec de nouvelles catégories de documents...
                https://informaticien51.fr

                Commentaire


                • #9
                  Bonjour,


                  Envoyé par FlodAriege Voir le message
                  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.).
                  Dernière édition par PhilJ à 04/08/2014, 16h41
                  Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                  Commentaire


                  • #10
                    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

                    Commentaire


                    • #11
                      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 2e 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)
                      Dernière édition par PhilJ à 05/08/2014, 00h49
                      Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                      Commentaire


                      • #12
                        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....
                        Mon site en cours de construction avec de nouvelles catégories de documents...
                        https://informaticien51.fr

                        Commentaire


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

                          Envoyé par lefabdu51 Voir le message
                          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

                          Commentaire


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

                            Envoyé par PhilJ Voir le message
                            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 !

                            Commentaire


                            • #15
                              Bonjour,


                              Envoyé par FlodAriege Voir le message
                              ç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 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
                              Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X