Lisibilité du site sur smartphone

Support Composants
#1

Bonjour,
Avec des collègues nous venons de créer note wiki qui commence à prendre forme en vue sur un ordinateur. Par contre, si on le visualise sur un smartphone, il est illisible.

Le problème se situe uniquement sur la page d’accueil : le texte dépasse le champ voulu et comme il est en blanc, il n’est pas lisible en entier (sauf ce qui déborde sur le fond coloré), les icônes se superposent aux autres images. Bref, c’est dans tous les sens.
En revanche sur les autres pages, tout va bien.

Quelqu’un aurait déjà rencontré ce problème ?

En vous remerciant.

#2

faudrait une url pour voir le soucis, et proposer une bidouille!

#3

L’URL du site : Ressources Guid'Asso : Le Centre de Ressources

Merci

#4

Votre cas est non trivial, idéalement faudrait plutot faire du design css pour avoir une vue mobile et une vue desktop

La vous utilisez des colonnes:

{{grid }}
{{col size="6"}}

(texte)

{{end elem="col"}}
{{col size="6"}}

{{attach class="right" file="Personnages_groupes.png" height="2176" nofullimagelink="1"  width="2845" }}

{{end elem="col"}}
{{end elem="grid"}}

Par défaut les colonnes vont a la ligne en dessus de 991px de largeur, donc sur les smartphone et tablettes, des Personnages apparaissent en dessous.

On peut rajouter des classes css pour empecher ce comportement par exemple class="col-xs-6" pour garder la grille meme sur les ecrans petits:

{{grid }}
{{col size="6" class="col-xs-6" }}

(texte)

{{end elem="col"}}
{{col size="6" class="col-xs-6" }}

{{attach class="right" file="Personnages_groupes.png" height="2176" nofullimagelink="1"  width="2845" }}

{{end elem="col"}}
{{end elem="grid"}}

Mais faut éventuellement faire ca pour tous les éléments de la page de type grille, et ca n’empêche pas le texte de déborder s’il y a une image (on peut faire des ajustements plus précis en css, mais c’est un métier à part entière )…

#5

Bonjour, le probleme le plus courant ce sont des sections sur lesquelles vous avez défini une hauteur, au lieu de s’adapter à la longueur du texte votre bloc de couleur est contraint par la hauteur que vous lui avez défini.
Option 1 : supprimer les parametres height sur les sections
option 2 : si vous voulez garder height il faudra définir du css specifique dans PageCSS, ca demande pour le coup de connaitre un minimum le langage CSS

#6

Merci pour vos retours. Avec l’équipe on va tenter et je vous tiens au courant.