problème d'affichage iPad

[stereo02]

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

[manu93fr]

Re : problème d'affichage iPad

Bonjour et bienvenu,

un lien vers le site ?
tu as du surement faire du copier/coller ... non ?

[stereo02]

Re : problème d'affichage iPad

Adresse du site concerné :

https://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.

[stereo02]

Re : problème d'affichage iPad

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

[ghazal]

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.

[manu93fr]

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é

[stereo02]

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.

[stereo02]

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

[lomart]

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

[ghazal]

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/tutorials/adding-a-custom-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

[lomart]

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é

[stereo02]

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.

[stereo02]

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.