bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

/lessites dégrossis responsive

This commit is contained in:
ouidade 2024-11-08 11:03:02 +01:00
parent d2755559f5
commit e11532e467
2 changed files with 67 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -3275,11 +3275,13 @@ main {
#lessites .content_container #block-quartiers-de-demain-titredepage { #lessites .content_container #block-quartiers-de-demain-titredepage {
margin-top: 1rem; margin-top: 1rem;
width: fit-content; width: fit-content;
margin-left: 10%;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
#lessites .content_container #block-quartiers-de-demain-titredepage { #lessites .content_container #block-quartiers-de-demain-titredepage {
margin-top: 10rem; margin-top: 10rem;
grid-column: 2/span 9; grid-column: 2/span 9;
margin-left: 0;
} }
} }
#lessites .content_container #block-quartiers-de-demain-titredepage h1 { #lessites .content_container #block-quartiers-de-demain-titredepage h1 {
@ -3290,28 +3292,42 @@ main {
} }
#lessites .content_container .view { #lessites .content_container .view {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
width: 100vw; width: 100vw;
} }
#lessites .content_container .view .header_view { #lessites .content_container .view .header_view {
flex: 0 1 100%;
position: relative !important;
height: fit-content; height: fit-content;
z-index: 0; z-index: 0;
width: 100vw; width: 100vw;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@media (max-width: 1100px) {
#lessites .content_container .view .header_view {
flex: 0 1 100%;
position: relative !important;
}
}
#lessites .content_container .view .header_view #block-sitesmap-block {
width: 30vw;
height: fit-content;
top: 250px;
position: fixed;
}
@media (max-width: 1100px) {
#lessites .content_container .view .header_view #block-sitesmap-block { #lessites .content_container .view .header_view #block-sitesmap-block {
margin: auto; margin: auto;
width: 30vw; width: 30vw;
position: relative !important;
top: 0px;
}
} }
#lessites .content_container .view .header_view #block-sitesmap-block #sites-map-container { #lessites .content_container .view .header_view #block-sitesmap-block #sites-map-container {
width: 100%; width: 100%;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
#lessites .content_container .view .header_view #block-sitesmap-block #sites-map-container { #lessites .content_container .view .header_view #block-sitesmap-block #sites-map-container {
height: 300px; height: fit-content;
} }
} }
#lessites .content_container .view .views-row-wrapper { #lessites .content_container .view .views-row-wrapper {
@ -3321,13 +3337,21 @@ main {
justify-content: center; justify-content: center;
width: 60%; width: 60%;
margin: auto; margin: auto;
padding-left: 4rem; padding-left: 10%;
gap: 20px; gap: 25px;
margin-right: 10%;
}
@media (max-width: 1100px) {
#lessites .content_container .view .views-row-wrapper {
padding-left: 0;
margin-right: auto;
width: 80%;
}
} }
#lessites .content_container .view .views-row-wrapper .views-row { #lessites .content_container .view .views-row-wrapper .views-row {
width: 18%; width: 18%;
margin-bottom: 2rem; margin-bottom: 2rem;
font-size: 0.55rem; font-size: 0.4rem;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
#lessites .content_container .view .views-row-wrapper .views-row { #lessites .content_container .view .views-row-wrapper .views-row {
@ -3338,6 +3362,7 @@ main {
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
font-family: "gilroy-bold"; font-family: "gilroy-bold";
padding-top: 0.5rem; padding-top: 0.5rem;
font-size: 0.55rem;
} }
#lessites .content_container .view .views-row-wrapper .views-row .views-field-field-images .field-content img { #lessites .content_container .view .views-row-wrapper .views-row .views-field-field-images .field-content img {
width: 100%; width: 100%;

40
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss
View File

@ -10,9 +10,12 @@ main{
#block-quartiers-de-demain-titredepage{ #block-quartiers-de-demain-titredepage{
margin-top: 1rem; margin-top: 1rem;
width: fit-content; width: fit-content;
margin-left: 10%;
@media(max-width: 810px){ @media(max-width: 810px){
margin-top: 10rem; margin-top: 10rem;
grid-column: 2 /span 9; grid-column: 2 /span 9;
margin-left: 0;
} }
h1{ h1{
@ -25,26 +28,41 @@ main{
.view{ .view{
display: flex; display: flex;
flex-direction: row; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
width: 100vw; width: 100vw;
.header_view { .header_view {
flex: 0 1 100%; // flex: 0 1 100%;
position: relative !important; // position: relative !important;
height: fit-content; height: fit-content;
z-index: 0; z-index: 0;
width: 100vw; width: 100vw;
margin-bottom: 2rem; margin-bottom: 2rem;
@media (max-width:1100px) {
flex: 0 1 100%;
position: relative !important;
}
#block-sitesmap-block{ #block-sitesmap-block{
// margin: auto;
// width: 30vw;
width: 30vw;
height: fit-content;
top: 250px;
position: fixed;
@media (max-width:1100px) {
margin: auto; margin: auto;
width: 30vw; width: 30vw;
position: relative !important;
top: 0px;
}
#sites-map-container{ #sites-map-container{
width: 100%; width: 100%;
@media(max-width: 810px){ @media(max-width: 810px){
height: 300px; height:fit-content;
} }
} }
} }
@ -58,12 +76,18 @@ main{
justify-content: center; justify-content: center;
width: 60%; width: 60%;
margin: auto; margin: auto;
padding-left: 4rem; padding-left: 10%;
gap: 20px; gap: 25px;
margin-right: 10%;
@media (max-width:1100px) {
padding-left: 0;
margin-right: auto;
width: 80%;
}
.views-row{ .views-row{
width: 18%; width: 18%;
margin-bottom: 2rem; margin-bottom: 2rem;
font-size: 0.55rem ; font-size: 0.4rem ;
@media(max-width: 810px){ @media(max-width: 810px){
width: 45%; width: 45%;
@ -72,6 +96,8 @@ main{
color: $blue_QDD; color: $blue_QDD;
font-family: "gilroy-bold"; font-family: "gilroy-bold";
padding-top: 0.5rem; padding-top: 0.5rem;
font-size: 0.55rem ;
} }
.views-field-field-images .field-content img{ .views-field-field-images .field-content img{
width: 100%; width: 100%;