Joomladay francophone 2018 à Paris 18 et 19 mai

problème d'affichage iPad

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

  • problème d'affichage iPad

    Bonjour à tous

    J’ai remarqué, que l’article de ma première page dépasse du cadre sur un iPad Apple
    Que c’est article et coupé et que la partie coupée ne peut être affiché.
    Sur quel élément puis-je intervenir pour corriger cet état sans démonter ma page dans les autres modes de visualisation. (ordi, téléphones,ect…).

    J'utilise gantry5



    Merci D'avance

  • #2
    Re : problème d'affichage iPad

    Bonjour et bienvenu,

    un lien vers le site ?
    tu as du surement faire du copier/coller ... non ?
    JoomlaDay ... moi j'y serai .. et vous ???
    Avec Ghazal et Lomart nous guiderons les Grands Débutants au https://www.joomladay.fr/ le 19 mai à Paris
    C'est le moment ou jamais de venir acquérir ou consolider les bases de ce CMS formidable primé à maintes reprises
    ... et tout ça dans le partage, la convivialité et la bonne humeur !

    Commentaire


    • #3
      Re : problème d'affichage iPad

      Adresse du site concerné :
      www.creatodrome.com

      J’ai tapé le texte, directement dans le champ de joomla. Et dans l’affichage du code source, il n’y a que des balises paragraphes <p>

      Sur l’image jointe on constate

      Le menu c’est décalé sur la gauche. Ce qui est très bien, il qui montre que le Template réagie a son environnement.
      Une partie du texte n’est plus accessible, oups pas bien.

      Commentaire


      • #4
        Re : problème d'affichage iPad

        Je cherche des hypothèses, de chemin possible d'action, pas forcement une réponse absolu et ultime.

        Commentaire


        • #5
          Re : problème d'affichage iPad

          Salut,
          Piece jointe non visible.
          Il faut glisser l'image uploadée dans le second tableau et tout en bas, cliquer Insérer dans le texte.
          Sinon, colle la dans n'importe quel site de partage de fichiers en ligne.

          Un petit effort d'orthographe, juste pour la compréhension de ton pb :
          Que c’est article et coupé ...
          J'imagine que c'est :
          Que cet article est coupé ...

          Opinion très perso :
          Gantry 5 est un template construit sur des principes assez différents des templates habituels, entre autres l'utilisation de YAML.
          Je pense que tu trouveras relativement peu de support ici.
          Mais il a l'air de fonctionner correctement, donc pourquoi pas.
          Cependant, la prise en main n'est pas évidente.

          Pour ton souci, effectivement, j'arrive à le voir sur mon iPad.
          Mais ma version de Hydrogen est correcte sur iPad.
          Quel éditeur ?
          Un copié /collé de Word comme le suggère manu93fr ?
          A éviter. Ou au moins vérifier le code (Word a la mauvaise habitude de rajouter des styles inline mal venus et autres joyeusetés).

          Raconte ce que tu as fait avec plus de détails pour que l'on puisse t'aider.
          Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
          Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

          Commentaire


          • #6
            Re : problème d'affichage iPad

            Aucun problème de responsive sur ipad de mon coté

            J’ai tapé le texte, directement dans le champ de joomla. Et dans l’affichage du code source, il n’y a que des balises paragraphes <p>
            ça, c'est tout a fait normal

            pour nous envoyer des images du problème ... passer en mode avancé
            JoomlaDay ... moi j'y serai .. et vous ???
            Avec Ghazal et Lomart nous guiderons les Grands Débutants au https://www.joomladay.fr/ le 19 mai à Paris
            C'est le moment ou jamais de venir acquérir ou consolider les bases de ce CMS formidable primé à maintes reprises
            ... et tout ça dans le partage, la convivialité et la bonne humeur !

            Commentaire


            • #7
              Re : problème d'affichage iPad

              Renvoi de la Pièce jointe non visible.
              http://www.creatodrome.com/PourInfo/DSC_0144.JPG


              Pour l’orthographe, le problème sera à jamais insoluble, mais je suis près à reformuler indéfiniment.
              Bien que j’ai l’impression que c’est l’un de mes problème qui engendrera le plus de réponses.
              Plus que les réponses techniques, oups désolé pour le mauvais esprit.

              Pour l’utilisation de l’ YAML je ne modifie pas ce que je ne comprends pas ou j’essaie.
              La prise en main de Gantry5 n’ai pas évidente car il n’y a aucune information en français sur le mode de fonctionnement, qui reste intuitif temps que l’on ne rencontre pas de problème non traité par leur interface.

              Vu mon niveau dans la langue de Molière je vous laisse imaginé mon niveau dans la langue de
              check spire (jeux de mot shakespeare).

              Ma version Hydrogen (v / g5_hydrogen)

              Editeur de code : Dreamweaver

              Si je fais un Copier-coller de Word je vérifie le code et enlève toutes balises superflues.

              Compte-rendu des opérations.
              Agrandissement du header de la Template a 300px de haut, insertion d’une image d’arrière-plan
              Fichier : _header.scss
              Ajout des codes dans l’iD : #g-header
              background-image:url(../../custom/images/bandeau01.jpg);
              height: 300px;

              Modification de la taille du logo.
              Fichier : _core.scss
              Ajout des codes dans la classe : .gantry-logo
              width: 500px;

              Pour le menu.
              Ajout des icônes devant chaque bouton, via l’interface du module de gantry5 dans joomla

              Pour le contenue de l’article, j’ai tous supprimer
              Configuration > composant Articles > onglet Articles
              Tout en rouge sauf
              Titre de l'article positionné sur Afficher en vert.
              Fichiers joints

              Commentaire


              • #8
                Re : problème d'affichage iPad

                Si l’ipad a un affichage Retina, sa résolution 2048 x 1536
                Si c’est un iPad standard la résolution est de 1024 x 768
                Je pense fortement que le problème agit que sur cette résolution. Et que sur safari ?

                Donc la question est :
                Puis-je ciblé que les iPad dans cette résolution 1024 X 768 ?
                En créent une classe qui n’agirais que sur les articles ?
                et dans quel fichier ?

                merci.

                Heu, je regrette le temps ou on codé en dur dans le bloc-notes

                Commentaire


                • #9
                  Re : problème d'affichage iPad

                  Heu, je regrette le temps ou on codé en dur dans le bloc-notes
                  Eh oui, et les ipad et autres bidules n'existaient pas

                  Le template utilise un display flex qui n'est pas superbement géré actuellement.
                  Peut-être en ajoutant un prefixe -webkit ?
                  ou en changeant de template
                  Avec Ghazal et Manu93fr nous guiderons les Grands Débutants au https://www.joomladay.fr/ le 19 mai à Paris
                  ---
                  UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                  bgMax
                  , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ...
                  plein de nouveaux modules et plugins sur http://lomart.fr/extensions

                  Commentaire


                  • #10
                    Re : problème d'affichage iPad

                    @stereo02
                    si je comprends bien ton explication, tu as un pb de méthodologie p/r ton utilisation de ce template particulier.
                    Si tu commences à rajouter des width et des height n'importe où, tu n'es pas sorti de l'auberge.
                    Pourquoi ?
                    Parce que ce qui est stylé (application de style CSS) pour le desktop s"applique aux formats tablette/mobile si ce n'est pas re-stylé dans les media queries et vice-versa.
                    T'imagine bien que la width d'un élément est calculée au petit poil pour les différents affichages.

                    En outre, ce template est très précis, toute modif a des conséquences.

                    Mon conseil, vire tout ce que tu as modifié dans les fichiers.

                    Et essaie en premier de passer par le gestionnaire de template d'hydrogen pour traiter le max de modifs possible.

                    Si ça ne te suffit pas, alors applique la méthode conseillée dans la doc Gantry :

                    Adding a Custom Style Sheet | Gantry Documentation
                    http://docs.gantry.org/gantry5/tutor...om-style-sheet

                    Tu vas te retrouver avec un fichier custom.scss
                    dans
                    g5_hydrogen/custom/scss/custom.scss
                    dans lequel tu pourras faire tous tes essais

                    *info - mediaqueries pour iPad
                    /* iPads (portrait et paysage) ----------- */
                    @media only screen
                    and (min-device-width : 768px)
                    and (max-device-width : 1024px) {
                    /* STYLES ICI */
                    }
                    Si tu mets une width à 500px (qui n'existait pas avant) pour l'affichage desktop, tu auras à priori une width à 500px pour l'iPad.
                    Il faudra probablement corriger dans les mediaqueries

                    @lomart
                    Je ne pense pas que les devs de Rockettheme vont s'amuser à coller du flex sans workarounds/fallbacks.
                    Surtout quand IE9 ne supporte pas le bidule.
                    Probablement ici :
                    <!--[if (gte IE 8)&(lte IE 9)]>
                    <script type="text/javascript" src="/gantry_hydrogen/media/gantry5/assets/js/html5shiv-printshiv.min.js?55dda5aa"></script>
                    <link rel="stylesheet" href="/gantry_hydrogen/media/gantry5/engines/nucleus/css/nucleus-ie9.css?55dda5ab" type="text/css"/>
                    <script type="text/javascript" src="/gantry_hydrogen/media/gantry5/assets/js/matchmedia.polyfill.js?55dda5aa"></script>
                    <![endif]-->
                    En outre, flex est supporté par l'iPad depuis la version 7.1
                    http://caniuse.com/#feat=flexbox

                    Les histoires de prefixes - pff, quelle galère :
                    What CSS prefixes should I use?
                    http://shouldiprefix.com/#flexbox
                    Dernière édition par ghazal à 26/08/2015, 18h45
                    Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
                    Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

                    Commentaire


                    • #11
                      Re : problème d'affichage iPad

                      Je ne pense pas les devs de Rockettheme vont s'amuser à coller du flex sans workarounds/fallbacks.
                      Sans doute, je ne connais pas suffisamment Gantry
                      Par contre, bricoler dans cette structure sans bien la maitriser est risqué
                      Avec Ghazal et Manu93fr nous guiderons les Grands Débutants au https://www.joomladay.fr/ le 19 mai à Paris
                      ---
                      UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                      bgMax
                      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ...
                      plein de nouveaux modules et plugins sur http://lomart.fr/extensions

                      Commentaire


                      • #12
                        Re : problème d'affichage iPad

                        Bricolé, je vais quand même le faire.

                        Chaque élément a un type display par défaut.
                        Ok, je vais me servir, de vos éléments pour résoudre mon problème.

                        Des recherches sur le display et ces différents modes et compatibilités autre que inline et block
                        Flex -webkit ect ….

                        Il est fort regrettable qu’il n’y ai pas de version française pour la documentation de Gantry.
                        Mais si ça me permets de travailler dans un seul fichier CSS ( custom.scss ) ça ne peut être qu’un plus.

                        Il va valoir que je trouve une solution pour toutes les personne qui on acheter les premier iPad qui sont sous une iOS 5. X x
                        Trouver une solution sans toucher sur ce qui fonctionne, ce serait dommage.
                        Puis la poster pour tout le monde dans ce poste, merci à tous.

                        Commentaire


                        • #13
                          Re : problème d'affichage iPad

                          Problème d’affichage sur les iPad non Retina, pour afficher les articles qui dépassent

                          1) Quand on veut modifier le css pour le Template de gantry5 il faut Créer le fichier custom.scss voir le dossier scss
                          templates/g5_hydrogen/custom/scss/custom.scss

                          2) Modifier le css en ciblant une certaine résolution
                          @media only screen
                          and (min-device-width : 768px)
                          and (max-device-width : 1024px) {
                          /* STYLES ICI */
                          .g-content{
                          /*background-color: rgba(0, 255, 0, 0.5); /* un arrière-plan vert à 50%*/
                          width: 750px;
                          }
                          }
                          La couleur ma permit de voir si j’agissais sur un élément cohérent ici la class .g-content
                          La valeur 750px, est le meilleur compromit en mode portrait, et acceptable en mode paysage.
                          J’ai n’ettoyer le bordel que j’avais mis dans les autres fichiers pour le logo et la taille du header

                          3) Quand on a modifié le css, que le fichier a été envoyé sur le serveur, pour qu’il soit pris en compte il faut dans la gestion du Template sous Joomla cliqué sur le bouton Recompile CSS
                          http://www.creatodrome.com/PourInfo/recompile_css.jpg


                          Merci à tous, pour vos réponses et merci à ghazal pour le Code.

                          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