problème d'affichage texte

WordPress :6.2
Statut : non résolu

Ce sujet contient 6 réponses, 3 participants et a été mis à jour pour la dernière fois par dehan77k, le il y a 2 années et 1 mois.

7 sujets de 1 à 7 (sur un total de 7)

Auteur

Messages
16 mai 2023 à 12 h 23 min #2454590
dehan77k
Participant

Initié WordPress
30 contributions
Bonjour,

Ma configuration WP actuelle
- Version de PHP/MySQL : 7.4
- Thème utilisé : Astra
- Extensions en place : Elementor, Litespeed cache, Woo commerce, convert for media, contact form 7..
- Nom de l’hébergeur : Hostinger
- Adresse du site : graphistologo.fr
Problème(s) rencontré(s) :

Bonjour, j’ai designer mon site mobile en utilisant mon Iphone 13 MINI et j’ai voulu regarder mon site internet avec le téléphone d’une autre personne pour voir ce que ça donnais (Samsung A53 5G). Le site est assez correcte, juste le seul soucis c’est au niveau des titres, le texte est mal alligner par rapport à mon iphone 13 mini.. (voir photo) comment est-ce que je pourrais faire svp ?
- Ce sujet a été modifié le il y a 2 années et 2 mois par dehan77k.
Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.
18 mai 2023 à 22 h 26 min #2454769

dehan77k
Participant

Initié WordPress
30 contributions

Personne ne peut m’aider ?

18 mai 2023 à 23 h 16 min #2454770
ferman
Modérateur

Maître WordPress
7644 contributions
Bonjour,

Essayez en mettant le code CSS ci-dessous dans les CSS additionnelles de votre thème:
```
@media only screen and (max-width:374px){
  #main h2.elementor-heading-title{
    font-size:60px;
  }
}
```
19 mai 2023 à 20 h 20 min #2454788

dehan77k
Participant

Initié WordPress
30 contributions

Bonjour, j’ai entrer cette commande dans le CSS aditionnelle et à ma grande surprise ça à fonctionner ! Un grand merci.

Puis-je abuser encore de votre temps pour m’expliquer ce que signifie cette ligne de code s’il vous plait ?

19 mai 2023 à 20 h 42 min #2454789
C_Lucien
Modérateur

Maître WordPress
5114 contributions
Bonjour,

sans préjuger de la réponse de @ferman, vous pourrez en apprendre beaucoup en fouinant sur ces sites
- https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries
- https://www.w3schools.com/css/css3_mediaqueries.asp
19 mai 2023 à 23 h 44 min #2454791
ferman
Modérateur

Maître WordPress
7644 contributions
Puis-je abuser encore de votre temps pour m’expliquer ce que signifie cette ligne de code s’il vous plait ?

Mais bien sûr, mon temps n’est pas si précieux!
1. La largeur d’écran de votre iphone est 375 px (c’est déjà petit). Apparemment l’écran de l’appareil de l’autre personne est encore plus étroit si bien que le mot « graphique » ne contient pas sur une seule ligne. On diminue donc la taille des lettres avec le code ci-dessous:
```
 #main h2.elementor-heading-title{
    font-size:60px;
  }

/* #main h2.elementor-heading-title définit l'élément à modifier */
```
(la valeur 60px est trouvée en essayant différentes tailles dans le code)

2. On veut que la règle s’applique uniquement aux écrans plus petits que 375px (puisqu’il n’y a pas de problème pour cette largeur). Cela correspond au code suivant:
```
@media only screen and (max-width:374px){
/* tout ce qui est à l'intérieur des accolades s'applique jusqu'à une largeur maximum  de 374px*/
}
```
En combinant les deux, on a: « pour le texte défini par ce sélecteur , la taille des lettres sera 60px, et ce tant que la largeur de l’écran n’excède pas 374px »

Le deuxième lien donné par @C_Lucien est très bien: il y a même un « exercice » qui permet de bien comprendre le fonctionnement de ce code.
- Cette réponse a été modifiée le il y a 2 années et 1 mois par ferman.
20 mai 2023 à 20 h 11 min #2454859

dehan77k
Participant

Initié WordPress
30 contributions

Super merci je vais m’entrainer avec ça, je voit que c’est quand même utile de s’y connaitre un minimum en CSS..
Auteur

Messages