Bonjour,

J'essaye d'aggrandir la width de mon .para mais le media queries ne marche pas et je n'arrive pas a visualiser le probleme

Merci d'avance a celui qui prendra le temps de réflechir à mon problème

Le code html :

.para {
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 20px ;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    border: solid 1px #a2abb3;
    transform: scale(1);
    transition: transform 100ms ease-in;
    &:hover {
        transform: scale(1.010);
        box-shadow: 2px 2px  5px #a2abb3;
    }
    &__p1 {
        order: 1;
    }
    &__p2 {
        order: 2;
    }
    &__p3 {
        order: 3;
    }

}

@media screen and (max-width: 1145px) {

    section {
        border: solid black;
        flex-direction: column;
    }
    .geo {
    }
    .para {
        width: 80%;
        flex-direction: row;
      &__p1 {
        
      }
      &__p2 {
        
      }
      &__p3 {

      }
    }
} 

-
Edité par AntoineRichard39 9 septembre 2022 à 21:45:30

Bonjour,

dans quel ordre as-tu les deux morceaux de CSS que tu nous montres ? Les media queries n'augmentent pas la spécificité des sélecteurs, donc doivent se placer après.

Le média queries est en haut de page et la class .para est après. Faut-il que je change l'ordre pour augmenter la spécificité ?

Oui, il faut que tu changes l'ordre. Le CSS est lu et interprété par les navigateurs de haut en bas. (j'ai fait une erreur en mentionnant la spécificité, ce n'est pas un "donc", mais deux faits séparés ; ce qui n'invalide pas mon propos : les media queries doivent être placées après ce qu'elles doivent surcharger)

merciii beaucoup  !!! ça a marché