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 : (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
    Dernière édition par FlodAriege à 29/11/2018, 19h10
    Flo, Ariège

    Il n'y a que celui qui a honte d'apprendre qui a peur de demander

  • #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).
      Flo, Ariège

      Il n'y a que celui qui a honte d'apprendre qui a peur de demander

      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.
          Flo, Ariège

          Il n'y a que celui qui a honte d'apprendre qui a peur de demander

          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?

            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
              Flo, Ariège

              Il n'y a que celui qui a honte d'apprendre qui a peur de demander

              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?

                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
                    Flo, Ariège

                    Il n'y a que celui qui a honte d'apprendre qui a peur de demander

                    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....

                        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
                          Flo, Ariège

                          Il n'y a que celui qui a honte d'apprendre qui a peur de demander

                          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 !
                            Flo, Ariège

                            Il n'y a que celui qui a honte d'apprendre qui a peur de demander

                            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
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X