28198 sujets

CSS et mise en forme, CSS3

Mon "first-letter" ne fonctionne qu'à moitié

Bonjour,

J'ai créé une ligne de code qui permet de mettre la première lettre du premier paragraphe des pages articles en grande taille et en rouge.

Le problème est que seulement sur certaines pages mon code ne fonctionne pas. J'ai beau comparer et tester, je ne trouve rien.

Voici la fameuse ligne CSS
body.single-post article.post .entry-content .elementor-element .elementor-widget:first-child .elementor-widget-container p:first-child::first-letter{
  color:#F7251C; font-weight:800; font-size:80px;
  line-height: 1; float:left; padding-right:6px; text-transform:uppercase;}


Et les pages concernées
OK : https://andeva.fr/lassociation/presentation-andeva
NO OK : https://andeva.fr/lassociation/objectifs-dates-et-chiffres-de-landeva

Un coup de main svp ?
Salut,

tu as un autre code qui transforme la première lettre différemment : 
body.postid-3 .entry-content div.elementor-element:first-child div.elementor-widget p:first-child::first-letter {
    color: #333!important;
    font-weight: 600!important;
    font-size: 24px!important;
    float: none!important;
    padding-right: 1px!important
}
Meilleure solution
Tu as aussi ça, qui fonctionne bien chez moi (Firefox, Chrome, Falkon, mobiles):
.lettrine {
  	float:left;
  	padding-right:2.6px;
  	margin-right:2px;
  	font-size:2em;
  	font-family:'PolicePerso';
  	color:red;}

<p><span class="lettrine">J</span>e suis une lettrine rouge......</p>
salut
ou bien plus simple
pas besoin de span
chaque 1ere lettre de chaque paragrafe sera + grande

p::first-letter {
font-size: 2rem;
line-height: 1;
}
Mathieuu a écrit :
Salut,
tu as un autre code qui transforme la première lettre différemment : 
body.postid-3 .entry-content div.elementor-element:first-child div.elementor-widget p:first-child::first-letter {
    color: #333!important;
    font-weight: 600!important;
    font-size: 24px!important;
    float: none!important;
    padding-right: 1px!important
}


EN effet, je n'avais pas vu cette ligne ! Problème résolu. Merci Smiley smile
@drphilgood
C’est effectivement encore plus simple, mais tous les paragraphes seront affectés, ce que l’on ne veut pas toujours.
Modifié par Bongota (05 Feb 2025 - 10:30)
Prévenir un modérateur
Répondre au sujet
Aller à