responsive slide ressources

This commit is contained in:
2025-06-08 22:08:11 +02:00
parent c30d886bb7
commit 8c365d816a
5 changed files with 122 additions and 63 deletions
@@ -20,7 +20,7 @@
margin-left: 28%;
@media (max-width:810px) {
margin-left: 0;
margin-left: 2rem;
text-align: left;
line-height: 4rem;
}
@@ -43,19 +43,20 @@
margin: auto;
margin-left: 28%;
@media (max-width:810px) {
margin-left: 0;
width: 90%;
margin-left: 2rem;
width: 85%;
}
@media (max-width:479px) {
order: 1;
margin-left: 0;
margin-left: 2rem;
// margin-right: 2rem;
}
.config_pages--base-de-donnees--full{
grid-column: 1 / span 5;
@media (max-width: 810px){
padding-top: 1rem;
padding-left: 2rem;
// padding-left: 2rem;
margin-top:1rem;
}
@media (max-width: 479px){
@@ -486,6 +487,9 @@
height: 100%;
width: 110vw;
z-index: 0;
@media (max-width: 810px){
left: 0;
}
}
> * {
position: relative;
@@ -505,6 +509,10 @@
margin-block: 0em;
@media (max-width: 810px){
padding-left: 2rem;
width: 70%;
}
@media (max-width: 479px){
width: 65% !important;
}
}
h3.type-publications-issues-du-programme-eqld {
@@ -518,6 +526,7 @@
&:before{
content:url("../images/pictos/picto-ressource-paroleslaureats.svg");
padding-right: 1rem;
}
}
h3.type-les-projets-en-images {
@@ -525,12 +534,14 @@
&:before{
content:url("../images/pictos/picto-ressource-projetsimages.svg");
padding-right: 1rem;
}
}
h3.type-presse {
&:before{
content:url("../images/pictos/picto-ressource-presse.svg");
padding-right: 1rem;
}
}
@@ -557,7 +568,11 @@
}
@media (max-width: 810px){
left: 81vw;
top: -4.3rem;
// top: -4.3rem;
}
@media (max-width: 479px){
left: 76vw;
top: -1.5rem;
}
}
@@ -580,19 +595,29 @@
padding-left: 2rem;
flex-direction: column;
.views-row{
width: 100%;
width: 100% !important;
}
}
.slick-next::before{
content:url("../images/pictos/fleche-droite-dans-rond.png");
display: block;
// display: block;
display: inline-block;
@media (max-width: 810px){
transform: scale(0.5); /* Réduction à 50% */
transform-origin: top left; /* Point dancrage du redimensionnement */
}
}
.slick-prev::before{
content:url("../images/pictos/fleche-droite-dans-rond.png");
display: block;
display: inline-block;
transform: scaleX(-1);
// display: none;
@media (max-width: 810px){
transform: scale(-0.5, 0.5);
transform-origin: top right; /* Point dancrage du redimensionnement */
}
}
.slick-prev.slick-disabled::before,
.slick-next.slick-disabled::before{
@@ -601,6 +626,20 @@
.slick-next {
right: 10%;
}
@media (max-width: 810px){
.slick-prev {
left: -10%;
}
.slick-next{
right: 2%;
}
}
@media (max-width: 479px){
.slick-prev {
left: -15%;
}
}
}
}
}