Problème du template Cassiopeia ?

[pjuignet]

Merci d'avoir fait ça.
Au hasard certaines semblent moins pires mais quand on diminue la taille d'écran la colonne de droite finit par apparaître. Quand c'est modéré les pages sont acceptées par le test mobile google (https://search.google.com/test/mobile-friendly?hl=fr). Quand c'est plus accentué elles sont déclarées "Page non adaptée aux mobiles". La pagination accentue le phénomène.

[dolmenhir]

Je crois que le problème vient de la balise "em" dans un "pre" en bas d'un article

<pre>Koyré A., <em>Etudes d'histoire de la pensée scientifique</em>, Gallimard 1973, p. 14.&nbsp; &nbsp;</pre>

Si je change la balise "em" par une balise "p" , la colonne disparaît.

[pjuignet]

Merci dolmenhir je vais regarder et modifier cette page.

Dans les pages où il y a une liste des articles, à partir d'une largeur faible (324px à peu près) la liste des article n'est plus responsive . exemple : https://philosciences.com/philosophi...e-reel-realite La liste des articles déborde à droite.

[dolmenhir]

En fait ça ne vient pas vraiment de là, mais la balise "pre" a une valeur "white-space" par défaut à "pre" alors qu'il faudrait a mettre à "normal"
Cela permettrait d'avoir la source qui passe automatiquement à la ligne.
Mais ça ne résoud apparemment pas tout ...

pre {
white-space:normal;
}

[dolmenhir]

et le "ul.pagination" devrait être en "display:flex" avec "flex-wrap:wrap"

ul.pagination {
display: flex;
flex-wrap: wrap;
}

[dolmenhir]

et pour finir

p.com-content-category-blog__counter.counter {
float: none !important;
}

[pjuignet]

Tout ce code vient directement de cassiopea et je ne vois pas comment le modifier.

Il y a un problème probablement le même type de problème avec les listes d'articles qui ne s'adaptent pas aux largeurs étroites . Par exemple : https://philosciences.com/philosophi...tion-emergence. à partir de 320 px ça déborde.

Comment remettre ça en ordre ? J'ai fait la mise à jour 4.0.4 hier soir.
ça dépasse mes compétences.

[Helloo]

...à partir de 320 px ça déborde.

En principe on va pas en dessous de 320px

J'ai testé le lien et le résultat à l'air bon:

----------------------

[dolmenhir]

Tout ce code vient directement de cassiopea et je ne vois pas comment le modifier.

Tu ajoutes les classes css que je t'ai données (les 3 codes) dans le fichier user.css et cela prendra l'ascendant sur les définitions du template natif.

A noter ton test d'optimisation mobile n'est pas une science exacte.
D'expérience, j'ai vu des pages parfaites qui ne passent pas le test et l'inverse aussi.

[pjuignet]

Je ne comprends pas comment ça peut varier d'une heure à l'autre .

[dolmenhir]

Je ne comprends pas comment ça peut varier d'une heure à l'autre .

Parce que, comme je l'ai dit, ce test d'optimisation n'est pas une science exacte.
Trop de facteur à prendre en considération et un algorithme pas vraiment au point.
Rien ne vaut une analyse humaine.

[pjuignet]

Ton code a marché la pagination ne sort plus du cadre.
La tendance à la colonne à droite reste. Mais sur les portables habituels, en général à plus de 320px ça ne se voit pas.
Personnellement je ne m'étais aperçu de rien, c'est la Search Console qui m'a alerté avec l'augmentation brusque des pages déclarées inadaptées aux portables .
Merci de ton aide et à Heloo aussi.
Bonne soirée.

[dolmenhir]

Corrige aussi le style utilisé pour l'affichage de la source sous l'article via le tag "pre"

pre {
white-space:normal !important;
}

[pjuignet]

Le "pre" est bien plus lisible ainsi et j'ai même rajouté un petit encadrement pour l'esthétique.

Merci c'est top !

En pratique la plupart des mobiles ont plus de 720 pixels et le problème est invisible.

C'est plutôt une question de référencement. Si Google (à tort ou à raison, peu importe) considère que le site n'est pas adapté aux mobiles il va le déprécier.

[RobertG]

Bonjour,

Je viens de reproduire le problème de pagination sur un template Joomlaplates basé sur Astroid. Je les en ai informé et leur ai donné à lire (si quelqu'un chez eux veut le faire) cette discussion.
Les templates Astroid utilisent template.css de Cassiopeia, il me semble.