Une code prends le dessus sur plusieurs autres

[schtroumph]

Salut

J'ai une div présente dans plusieurs pages. Suivant les pages j'ai remarqué que, sur des pages différentes, le placement des éléments étaient le même (je sais pas si mon explication est claire ). Pour ne pas dupliquer (voir tripler) le même code j'ai mis dans _declarations.scss les codes pour les différents placements :

%licences-tutos-1-ligne {

    grid-template-columns: 274px 95px 110px 95px 105px;
    grid-template-rows: 1fr;
    
        & .titre
            {grid-column:1; grid-row:1;}
        & .img-ccbysa
            {grid-column:2; grid-row:1;}
        & .plus-info-ccbysa
            {grid-column:3; grid-row:1;}
        & .img-lal
            {grid-column:4; grid-row:1;}
        & .plus-info-lal
            {grid-column:5; grid-row:1;}
           
        & .titre p:after {
            content:":";
            margin:0 0 0 10px;
        }
}

%licences-tutos-2-lignes {

    grid-template-columns: 268px 105px 105px;
    grid-template-rows: 1fr auto;
    
        & .titre
            {grid-column:1; grid-row:1 / span 2;}
        & .img-ccbysa
            {grid-column:2; grid-row:1;}
        & .plus-info-ccbysa
            {grid-column:2; grid-row:2;}
        & .img-lal
            {grid-column:3; grid-row:1;}
        & .plus-info-lal
            {grid-column:3; grid-row:2;}
       
        & .titre {align-self:center;}
       
        & .titre p:after {
            content:":";
            margin:0 0 0 10px;
        }
       
        & img {justify-self:center;}
       
        & .plus-info {text-align:center;}
}

%licences-tutos-3-lignes {

    grid-template-columns: repeat(2, 125px);
    grid-template-rows: auto auto auto;
    
        & .titre
            {grid-column:1 / span 2; grid-row:1;}
        & .img-ccbysa
            {grid-column:1; grid-row:2;}
        & .plus-info-ccbysa
            {grid-column:1; grid-row:3;}
        & .img-lal
            {grid-column:2; grid-row:2;}
        & .plus-info-lal
            {grid-column:2; grid-row:3;}
           
        & img {justify-self:center;}

        & .titre p:after {
            content:"";
            margin:0;
        }
       
        & .plus-info {text-align:center;}
}

Dans _contenu-modules-tutoriels.scss j'ai mis les codes correspondant à chaque page. Pour la page d'accueil c'est :

.page-tous-les-tutos .licences-tutos .custom {
    @extend %licences-tutos-1-ligne;
}

Je me suis attaqué au responsive (j'utilise l'outils de développement web de Firefox) de la premeire page :

@media (min-width:320px) and (max-width:599px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-3-lignes;
    }
}

@media (min-width:600px) and (max-width:1023px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-2-lignes;
    }
}

@media (min-width:1024px) and (max-width:1180px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-1-ligne;
    }
}

Et c'est là que ça foire. Sur toutes les largeurs d'écrans ce qui est pris en compte c'est :

@extend %licences-tutos-3-lignes;

Joomla 4.4.4
Casssiopeia (enfant) 1.

[schtroumph]

Je suis allé demandé de l'aide sur un autre forum. Pour info je vous donne le lien.