[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

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.

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)

polo9908 a écrit :
Merci. Pour régler le problème j'ai mis un !important

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 ( ).

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).