Titres illisibles sur la version mobile suite passage à nouveau design

[Pascale68]

Bonjour à tous,

J'ai modifié l'ancien design de mon site en choisissant le design "HELSINKI".
Je viens juste de regarder la version mobile sous Android 5.1 et c'est la cata ! Pourtant sur mon PC, tout paraît OK

Sur la version mobile, le titre principal (celui tout en haut en vert) ainsi que les Titres 1 sont bizarrement illisibles ou d'une taille disproportionnée.  

A noter que lors du passage vers le site Helsinki, les hauteurs et espaces étaient démesurées, j'ai voulu trouver la solution moi-même   pour réduire ces espaces et afficher mon site sur environ une page écran. J'ai cherché sur le net, j'ai lu les différentes interventions des experts du forum sur le sujet. Je m'en suis donc inspiré, j'ai utilisé Firefox ("examiner l'élément") et j'ai modifié à mon tour le HEAD de mon site avec les données suivantes :

<style type="text/css">
/*<![CDATA[*/  
.jtpl-section__gutter {margin-top: 0px;}
.jtpl-header {line-height: 0;}
.jtpl-content__container.cc-content-parent {margin-top: 0px;}
/*]]>*/
</style>


Tout me paraissait bien (la version sur mon PC) jusqu'à ce que je regarde la version mobile.
Quelqu'un a une idée pour remédier à la situation ou a eu pareil mésaventure  Merci par avance.


Pascale
P.S: Non informaticienne, je suis arrivée aux limites de mes compétences...

[FredVig]

Bonjour.
C'est la bonne méthode (votre code). Toutefois, il faut vérifier que les codes fonctionnent aussi lorsque la fenêtre du navigateur est plus étroite, ce qui doit intervenir sur la version mobile. Dans votre cas, le line-height:0 force les deux lignes du titre à s'afficher sur lui-même, le rendant illisible. supprimez cette propriété et cela devrait revenir dans l'ordre.
Les titres ne devraient pas changer sur une version mobile. Une fois que vous leur donnez un aspect (couleur, dimension) ils devraient la conserver, en tout cas proportionnellement, sur mobile. Mais Jimdo propose des alternatives mobiles de tailles pour les titres qui sont parfois surprenantes (et difficile à modifier avec du code).
Essayez d'utiliser la version 2 ou 3 des titres plutôt que la 1, et vérifiez qu'elle ne change pas trop en version mobile.

[Pascale68]

Bonjour FredVig,

Merci pour cette réponse très pertinente. J'ai modifié la ligne avec le line-height:0 dans le HEAD en le passant à 0.5. afin d'agrandir l'espace.

En supprimant complètement la ligne, l'espace au-dessus de la sidebar et autour du header était de plusieurs centimètres, ce n'était pas possible à garder en l'état.
N'ayant pas de logo, j'ai également supprimé la ligne de 1px que j'avais mis à la place du logo pour rogner de la place. Ca pouvait peut-être également joué sur le problème...
Je vais ajuster tout ça ce week-end pour voir le rendu sur téléphone portable.

Merci encore pour ta réponse, elle m'a beaucoup aidée.

Pascale.

[FredVig]

à 0.5, le titre continue de se chevaucher. Essayez au moins 1px.
Vous pouvez aussi modifier ça :
.jtpl-header__container {
padding: 1.8rem 0;
}

[Pascale68]

Merci infiniment FredVig. Ca doit être bon maintenant.  

Le code final (à placer dans le HEAD) pour ceux intéressés de s'en inspirer :

<style type="text/css">
/*<![CDATA[*/  
.jtpl-section__gutter {margin-top: 0px;}
.jtpl-header {line-height: 1;}
.jtpl-content__container.cc-content-parent {margin-top: 0px;}
.jtpl-header__container {padding: 1.8rem 0;}
/*]]>*/
</style>

[FredVig]

Les codes ne conviennent qu'à un seul site précis, sauf exception.

Vous avez toujours le problème du changement de taille de la police de titre, malgré l'option h2…

Essayez de rajouter ce code :

Code:

@media(max-width:767px) { .j-module h2, .j-module h1 {
   font-size: 15px !important;
  }
}

[Pascale68]

Merci mille fois FredVig. J'ai l'impression que maintenant c'est parfait !  

Là vraiment il fallait écrire du code... Impossible de trouver cette dernière modification si on ne sait pas programmer en html...  

Pascale.

[FredVig]

C'est pour ça qu'il y a des "experts Jimdo", nous nous occupons des détails spécifiques auxquels Jimdo ne peut pas penser à l'avance.

[Contenu sponsorisé]