28111 sujets

CSS et mise en forme, CSS3

[Résolu] Problème media queries

Bonjour,

Je souhaite changer le background de .title-competences mais celui-ci ne change pas de couleur.

<section id="competences" class="competences">
            <article class="title-competences">
                <h2><?php echo $tr['compet']?></h2>
                
            </article>
            <article class="competences-responsive">
                 <div class="competence"></div>
                 <div class="competence"></div>
                 <div class="competence"></div>
                 <div class="competence"></div>
                 <div class="competence"></div>
                 <div class="competence"></div>
                 <div class="competence"></div>
                 <div class="competence"></div>
                 <div class="competence"></div>
            </article>
</section>



@media screen and (max-width:980px){
 .competences
 {
  
  .title-competences
  { 
    background: #191919;
  }
  .competences-responsive
  {
    width:100%;
    height: 500px;
    display:flex;
    background:#191919;
    flex-direction: column;
    justify-content: space-evenly;
  
    .competence
    {
       height:500px;
       width: 500px;
       border-radius: 50%;
       color:red;
    }
  }
  #maincompet
  {
    display:none;
  }
}
}


Merci Smiley smile
Modérateur
Salut,

Ça marche bien pourtant.
Tu compiles bien le SASS ? Tu as bien la bonne largeur d'écran ? Tu valides bien la media querie avec d'autres CSS ?
Oui le SASS compile, la largeur est inférieur à 980 px quand je test. Et oui il y a une modification en direct sur mon fichier css
Modifié par polo9908 (25 Apr 2019 - 14:18)
Quand je fais des modifications sur d'autres balises comme la balise avec la classe .competences-responsive celle-ci change correctement.
Administrateur
Bonjour,

si tu rajoutes un !important, est-ce que ça finit par se voir ?
En ajoutant un border: 4px dashed red aussi, en l'appliquant à .title-competence(s) > h2 plutôt ?
Avec les DevTools / F12 (de Firefox dans mon cas), que dit l'onglet Inspecteur / Calculé (tu peux y voir la valeur appliquée et de quel sélecteur cela provient, et lesquels sont écrasés. Ça se voit aussi dans les styles - 2e colonne de Inspecteur - avec l'effet barré / pas barré)
Merci. Pour régler le problème j'ai mis un !important
Modifié par polo9908 (25 Apr 2019 - 15:43)
Administrateur
Pour tester, c'est pratique. Pour un site ("en production" enfin dans la nature), c'est une fort mauvaise pratique.
Maintenant à chaque fois que tu voudras écraser cette valeur (et avec le responsive ce ne sont pas les occasions qui manquent), tu devras systématiquement ajouter ce modificateur ( Smiley sweatdrop ).

Maintenant que tu sais que ça vient de là, mieux vaudrait trouver/voir dans F12 quel sélecteur écrase cette déclaration et voir s'il est écrit après (en se fiant au numéro de ligne) et quelle est sa spécificité (.classe1 .classe2 l'emporte sur .classe3 - 2 contre 1 par exemple).
Sujet clos
Aller à