Antoine/Deligraph-V3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implementing variation on height
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2025-02-10 16:32:18 +01:00
parent 72da352956
commit c31174bb4f
2 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/app.css
View File

@ -508,6 +508,18 @@
max-height: 24rem;
}
.gallery-website-screens__screens-grid.is-flex.height--small img{
max-height: 16rem;
}
.gallery-website-screens__screens-grid.is-flex.height--medium img{
max-height: 20rem;
}
.gallery-website-screens__screens-grid.is-flex.height--big img{
max-height: 24rem;
}
@media (min-width: 782px){
.gallery-website-screens__screens-grid.is-mobile-capture{
gap: 1.5rem;
@ -536,8 +548,7 @@
/* Fixe la largeur max */
height: 100%;
/* Fixe la hauteur max */
max-height: 800px;
/* Ajuste selon ton besoin */
/* max-height: 500px; Ajuste selon ton besoin */
-o-object-fit: cover;
object-fit: cover;
/* Évite les déformations */

17
resources/css/blocks/gallery-website-screens.css
View File

@ -18,6 +18,21 @@
img {
@apply max-h-96;
}
&.height--small {
img {
@apply max-h-64;
}
}
&.height--medium {
img {
@apply max-h-80;
}
}
&.height--big {
img {
@apply max-h-96;
}
}
}
&.is-mobile-capture {
@apply md:gap-6 xl:gap-12;
@ -30,7 +45,7 @@
img {
width: 100%; /* Fixe la largeur max */
height: 100%; /* Fixe la hauteur max */
max-height: 800px; /* Ajuste selon ton besoin */
/* max-height: 500px; Ajuste selon ton besoin */
object-fit: cover; /* Évite les déformations */
}
}