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