[Problème] Problème du template Cassiopeia ?

[pjuignet]

Bonjour,
La Google Search Console indique que mes pages ne sont plus adaptées aux mobiles. Effectivement pour les très petits écrans (inf à 510 px) il se crée une colonne vide à droite et le contenu est tassé à gauche, ce qui le rend minuscule.
Site https://philosciences.com
J'utilise le template Cassiopeia avec quelques modifs par user.css
Si quelqu'un a une idée elle sera la bienvenue.

[woluweb]

tu viens de résoudre le problème, non ?

[Helloo]

Bonjour,
La Google Search Console indique que mes pages ne sont plus adaptées aux mobiles. Effectivement pour les très petits écrans (inf à 510 px) il se crée une colonne vide à droite et le contenu est tassé à gauche, ce qui le rend minuscule.
Site https://philosciences.com
J'utilise le template Cassiopeia avec quelques modifs par user.css
Si quelqu'un a une idée elle sera la bienvenue.

Je vois pas le problème (Firefox)

[woluweb]

c'est ça les philosophes : le simple fait de formuler ta question te donne la réponse

[Helloo]

Je vois les problèmes suivants :

1. La pagination est trop large sur mobile
2. Il n’y a pas de menu pour mobile

[pjuignet]

c'est ça les philosophes : le simple fait de formuler ta question te donne la réponse

Il donne la réponse à qui sait la trouver, mais pas à moi.
Je ne vois pas pourquoi une colonne se génère à droite sans motif.

[pjuignet]

Je vois pas le problème (Firefox)

Sur Firefox et Edge le problème n'apparaît pas, sur Chrome oui et chez Google aussi.

[Helloo]

Si si, les même problèmes sur Firefox, comme écrit plus haut: 1. Pagination ...

[RobertG]

La réponse est peut-être dans une instruction gérée par un "@media (max-width: 575.98px) {"
Pas de problème non plus pour moi sur un assez ancien smartphone Android, que ce soit sur Firefox ou Chrome, mais je pense qu'il a une largeur d'écran supérieure.

[Helloo]

Pagination:

[RobertG]

Bien vu !

[pjuignet]

La pagination sort du component content.
Mais pourquoi ?
Je ne lui ai pas donné la permission moi !

[woluweb]

haha, je pense qu'avec un peu de css (genre https://www.w3schools.com/cssref/pr_pos_overflow.asp) tu devrais éviter que la pagination soit plus large que ton contenu sur smartphone

[pjuignet]

Rien dans le user.css ne concerne la pagination. Je ne vois pas.

/* Change couleur des fonds*/
body {
background-color: #FBF3E3;}

.container-component {
background-color: #FFFFFF;
border-radius: 1em;
box-shadow: 0px 0px 1em 0.1em #913C03;
padding: 1.5em 5em 1.5em 5em;
}

/* Change alignement */
p {
text-align: justify; }
blockquote {
text-align: justify; }


/* Change padding c-c pour tel*/
@media only screen and (max-width: 515px) {
.container-component {
padding: 0.3em; }
}
/* Change padding c-c pour tablettes*/
@media only screen and (max-width: 767px) {
.container-component {
padding: 1em 2em 1em 2em; }
}

/* Change paragraphe article body ; pour ordi*/
@media only screen and (min-width: 768px) {
.com-content-article__body p {
font-size: 1.1em;
padding: 0 1.5em 0; }

}


/* Change citation pour ordi*/
@media only screen and (min-width: 768px) {
.com-content-article__body blockquote {
margin: 0 4em 1em;
}
}

/*change position card pour ordi*/
@media only screen and (min-width: 768px) {
.card {
margin-left: 0.8em; }
}

/* change couleur fond fil d'ariane*/
.breadcrumb {
background-color: #FBF3E3;
border: 0;
padding: 0
}

/*change card */
.card {
background-color: #FBF3E3;
border: 0;
padding: 0.5em;
}

/* Change lettrages divers*/
a {
color: #aa0707;}

h2 {
color : #cb1010;}


/* Change couleur boutons divers */
.btn-primary {
background-color: #9e201f;
border-color: #cb1010;}

.bg-info {
background-color: #b81717!important;
}

/*change couleur des info alertes et liens entre pages*/

.alert-info {
background-color: #FBF3E3;
color: #913C03;
border : 0;
}

.page-link {
color: #aa0707;
border: 0;
}

[Helloo]

Rien dans le user.css ne concerne la pagination. Je ne vois pas.

C'est normal, à la base le fichier user.css est vide et tu dois le nourrir !

Comme woluweb a dit, ici tu vas trouver:

https://www.w3schools.com/cssref/pr_pos_overflow.asp