responsive tâche 3273 - 3275 3276

This commit is contained in:
2025-04-04 11:12:19 +02:00
parent 57a99ee386
commit 681d3c9443
4 changed files with 92 additions and 48 deletions

View File

@@ -819,10 +819,19 @@ footer {
@media (max-width: 810px) {
.layout-sidebar-first {
position: relative;
width: 80%;
top: 160px;
width: 100%;
top: 200px;
margin: auto;
margin-top: 1rem;
background-color: white;
padding-top: 1rem;
padding-bottom: 1rem;
}
}
@media (max-width: 810px) {
.layout-sidebar-first .sidebar_first_container {
width: 80%;
margin: auto;
}
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1,
@@ -4238,12 +4247,28 @@ main {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .views-field-field-documents {
margin-top: 0.5rem;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation {
width: 25%;
}
@media (max-width: 810px) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation {
width: 50%;
}
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row {
width: 50%;
height: fit-content;
display: grid;
grid-template-columns: 1fr 1.2fr;
grid-template-rows: repeat(5 1fr);
margin-top: 1rem;
}
@media (max-width: 810px) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row {
width: 100%;
grid-template-columns: 1fr 2fr;
}
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-images,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-video {
grid-column: 1;
@@ -4252,11 +4277,19 @@ main {
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-images iframe,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-video iframe {
width: 80%;
width: 100%;
height: auto;
aspect-ratio: 1/1;
border-radius: 9px;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-images img,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-video img {
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 9px;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-title-1 {
margin-top: 0;
}
@@ -4290,24 +4323,12 @@ main {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Vidéo .views-row iframe {
border-radius: 9px;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-podcast) {
width: 50%;
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Vidéo .views-row .views-field-title-1 {
margin-top: 1rem;
}
@media (max-width: 810px) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-podcast) {
width: 100%;
}
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-documentation) {
width: 25%;
}
@media (max-width: 810px) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-documentation) {
width: 50%;
}
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-Kit-de-communication) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Kit-de-communication {
width: 100%;
background-color: rgb(7, 50, 194);
}
.type-documentation .views-field-body-1,
@@ -4345,7 +4366,8 @@ main {
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
display: flex;
margin: auto;
margin-top: 16rem;
margin-top: 13rem;
margin-bottom: 4rem;
}
}
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
@@ -4401,6 +4423,11 @@ main {
width: 250px;
margin-right: 1rem;
}
@media (max-width: 810px) {
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images {
margin-bottom: 1rem;
}
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama {
width: 100%;
display: flex;