[RÉGLÉ] illisible sur les portables

[pjuignet]

Bonjour à tous,
Petit problème de "responsive design".
Mon site est illisible sur les portables (affichage d'une syllabe par ligne). Les marges ne semblent pas "responsive", si bien 'est correct sur PC et tablettes mais sur les teléphones portable la partie restante au centre est minuscule.

J'utilise le protostar de base avec un user css réduit à très peu qui met le texte en Georgia 13em, car j'ai des textes longs qui doivent être lisibles.

site http://www.philosciences.com/Pss/

[lomart]

Re : illisible sur les portables

Bonsoir,
Ajouter en fin de votre user.css

@media (max-width: 480px) {
[class^="leading-"] {margin:0}
}

[manu93fr]

Re : illisible sur les portables

Bonsoir,
Je vois un problème de margin:0 qui est annulé ...
renomme ton user.css en userhold.css ... juste pour voir si c'est bien un soucis avec tes règles Css (vu que tu n'as touché qu'a ça)

[pjuignet]

Re : illisible sur les portables

Bonsoir,
Je vois un problème de margin:0 qui est annulé ...
renomme ton user.css en userhold.css ... juste pour voir si c'est bien un soucis avec tes règles Css (vu que tu n'as touché qu'a ça)

Exact bien vu
ça vient de mon fichier user.css

body {
	margin: 0;
	font-family: Lato;
    font-size: 1em;
	line-height: 1.5em;
	color: #333;
	background-color: #fff;
}

h1 {
    font-size: 2.2em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1.2em;
}

p {
    font-family: Georgia;
    font-size: 1.2em;
    line-height: 1.6em;
   }

[class^="leading-"] {
    border-bottom: 3px solid red;
    margin: 0 6em;
}

.item-page > div {
    margin: 0 8em;
}

Je pense que ça vient des dernières lignes .item-page

[pjuignet]

Re : illisible sur les portables

Bonsoir,
Ajouter en fin de votre user.css

@media (max-width: 480px) {
[class^="leading-"] {margin:0}
}

je vais essayer ce genre de méthode, car je ne veux pas supprimer mes marges en général.

>>après essai ça ne marche pas. les marges restent trop grandes sur les portables.

[lomart]

Re : illisible sur les portables

après essai ça ne marche pas. les marges restent trop grandes sur les portables.

Il n'y a pas de raison. Il faut peut-être adapter la largeur à partir de laquelle on supprime les marges (ici 480px)
Remettez votre user.css avec cette règle, je regarderais ce qui coince.

Vous pouvez mettre la règle
[class^="leading-"] {
border-bottom: 3px solid red;
margin: 0 6em;
}
avec margin: 0 1em;
afin de permettre les tests sans dénaturer le site

soit :

body {
	margin: 0;
	font-family: Lato;
    font-size: 1em;
	line-height: 1.5em;
	color: #333;
	background-color: #fff;
}

h1 {
    font-size: 2.2em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1.2em;
}

p {
    font-family: Georgia;
    font-size: 1.2em;
    line-height: 1.6em;
   }

[class^="leading-"] {
    border-bottom: 3px solid red;
    margin: 0 1em;
}

.item-page > div {
    margin: 0 8em;
}
@media (max-width: 480px) {
    [class^="leading-"],
    .item-page > div {
      margin:0
    }
}

J'ai étendu la règle aux .item-page > div

[pjuignet]

Re : illisible sur les portables

J'ai étendu la règle aux .item-page > div

ça marche les marges sont annulées sur les portables avec :

@media (max-width: 480px) {
    [class^="leading-"],
    .item-page > div {
      margin:0
    }
}

Du coup ne pourrait-on pas faire une taille de caractère qui s'applique aux portables avec une règle du même genre ??

@media (max-width: 480px) {
   p {
    font-family: Arial;
    font-size: 0.9em;
    line-height: 1.1em;
    }
}

?????

[lomart]

Re : illisible sur les portables

?????

Tout à fait

[pjuignet]

Re : illisible sur les portables

Tout à fait

j'essaye..

C'est bon, ça marche .

Mais il faudrait faire pareil pour les tablettes.

En fait, je suis entrain de reconstituer le responsive design que j'ai annulé avec ma commande pour avoir un format texte mieux adapté aux grands écrans. Ce n'est pas malin cette manière de faire. Je refais ce que j'ai défait...