Une code prends le dessus sur plusieurs autres

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Une code prends le dessus sur plusieurs autres

    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 :

    Code:
    %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 :

    Code:
    .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 :

    Code:
    @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 :

    Code:
    @extend %licences-tutos-3-lignes;
    Joomla 4.4.4
    Casssiopeia (enfant) 1.
    Sur mon site www.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

    Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

  • #2
    Je suis allé demandé de l'aide sur un autre forum. Pour info je vous donne le lien.
    Sur mon site www.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

    Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

    Commentaire

    Annonce

    Réduire
    Aucune annonce pour le moment.

    Partenaire de l'association

    Réduire

    Hébergeur Web PlanetHoster
    Travaille ...
    X