Salut
Je suis sous Joomla 4.4.4 et j'ai une div (avec le même contenu) présente dans plusieurs pages. En responsive, suivant les pages j'ai remarqué que j'ai trois styles de placements des éléments qui reviennent. Pour ne pas dupliquer (voir tripler) les mêmes code j'ai mis dans le fichier _declarations.scss les trois codes correspondant aux 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;
}
Pour le responsive de la première 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;
J'ai fait deux tests.
Test 01 : j'ai modifié la couleur du titre de cette div suivant la largeur (les codes ont été mis dans les mêmes fichiers). La modification est bien prise en compte suivant la largeur.
Test 02 : dans _contenu-modules-tutoriels.scss, à la place de "@extend...", j'ai mis le code complet. Les placements, suivant la largeur, est bien prise en compte.
J’espère que j'ai été clair dans mes explications