Probleme de font H1

Bonjour,

Je recherche une réponse pour débutante !!

J'ai un blog ( www.soul-inside.com) et utilise un thème sous wordpress.
Je voudrais introduire du texte en H1 pour améliorer mon référencement.

Mon problème est que je peux changer la police des balises H1 sur la version desktop, mais pas sur la version responsive. Du coup, je me retrouve avec des parties H1 ENOOOOORMES par rapport au reste du texte, et meme plus grosses que le titre de mon article.

Et... c'est moche !

Est ce que quelqu'un saurait ou je dois aller fouiner pour changer les polices de mes balises ?

Merci pour votre aide !!

Mary

Bonjour Cacahuète,


Dans tes CSS il y en a un nommé "grid.css" qui contient :

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 24px!important;
    }
}

Le code est assez difficile à over rider à cause du !important ( ) et le second problème est que ce CSS est chargé parmi les dernier, donc il aura le dernier mot sur le custom.css par exemple.

Il faudrait arriver à mettre le même code mais avec la taille que tu souhaites :

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 16px!important;
    }
}

Et il faudrait le mettre APRES l'appel à grid.css et là..... je sais pas trop comment attaquer ça pour pas faire du code trop sale....
Tu utilises quoi comme thème ?

Je n'arrive meme pas à éditer le fichier !! pourtant les droits sont en 777 !???

Peanut a écrit :
Si j'arrive à changer la font-size dans le grid.css cela devrait résoudre le problème ?
( tant que je ne fais pas de mise à jour )
C'est moche, mais ça marche....
c'est bien ça ?

C'est exactement ça. Mais je pense qu'il y a moyen de faire plus propre avec la méthode du thème "enfant" : Child Themes

En gros à coté du dossier de ton thème (que tu veux éviter de toucher) tu va créer un autre dossier nomé exactement pareil + "-child". Dedans tu va mettre un function.php et un style.css qui vont te permettre d'overrider le theme proprement normalement. Tout est décris dans le liens.


Modifié par _laurent (21 Jul 2016 - 13:16)

Merci Laurent !

En suivant tes conseils, je crée un thème enfant.
dans le thème enfant, j'ai crée les fichiers style.css et functions.css
mais quand je veux les ouvrir pour écrire dedans, il me répond:

Statut : Démarrage du téléchargement de /wp-content/themes/letsblog-child/style.css
Commande : CWD /wp-content/themes/letsblog-child
Réponse : 250 OK. Current directory is /wp-content/themes/letsblog-child
Commande : TYPE A
Réponse : 200 TYPE is now ASCII
Commande : PASV
Réponse : 227 Entering Passive Mode (212,129,21,7,149,41).
Commande : RETR style.css
Réponse : 150 Connecting to port 51484
Erreur : La connexion des données ne peut pas être établie : ECONNREFUSED - Connexion refusée par le serveur
Réponse : 226 File successfully transferred
Erreur : Échec du transfert du fichier
Statut : Démarrage du téléchargement de /wp-content/themes/letsblog-child/style.css
Commande : PASV
Réponse : 227 Entering Passive Mode (212,129,21,7,171,44).
Commande : RETR style.css
Réponse : 150 Connecting to port 44158
Erreur : La connexion des données ne peut pas être établie : ECONNREFUSED - Connexion refusée par le serveur
Réponse : 226 File successfully transferred
Erreur : Échec du transfert du fichier
Statut : Démarrage du téléchargement de /wp-content/themes/letsblog-child/style.css
Commande : PASV
Réponse : 227 Entering Passive Mode (212,129,21,7,228,28).
Commande : RETR style.css
Réponse : 150 Connecting to port 56542
Erreur : Could not read from transfer socket: ECONNRESET - Connexion réinitialisée par un pair
Réponse : 226 File successfully transferred
Erreur : Échec du transfert du fichier

???
Help !!

Merci
Mary

Heu... t'es ou pour faire tout ca ? dans Filezilla ?
Tu tente de l'éditer directement sur le serveur ?
En fait il faut juste que tu crée le fichier sur ton PC en local. Tu écris dedans tes trucs et apres hop tu le balance dans le dossier sur le serveur avec Filezilla.

Ha, attends, ton theme c'est bien Lets Blog ?

Non parce-que dans la personnalisation du thèem : Apparence > Theme > personaliser > General > Typography tu peux régler la taille des h1, 2, 3 etc d’après ce que je vois sur la démo (donc pas besoin de t'embrouiller avec tout ça si t'as un interface déjà prévue...)
Modifié par _laurent (21 Jul 2016 - 15:53)

essaie avec le !important, c'est juste une question de priorité....

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 16px!important;
    }
}

toujours pas ...

!!!
J'ai fait un test:

@media only screen and (max-width: 767px) {
h1 {
font-size: 16px!important;
font-style : italic;
}
}
le texte apparait toujours en grosse police, mais incliné !

Modifié par Peanut (21 Jul 2016 - 21:32)