diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index e0aa68c..acf7435 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -1313,10 +1313,21 @@ article.node--type-frontpage .node__content > section.home-showrooms { article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference { position: relative; display: grid; - grid-template-columns: 1fr; grid-template-rows: 1fr; } + @media only screen and (max-width: 1575px) { + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference { + grid-template-columns: 1fr; } + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item { + grid-column: 1; } } + @media only screen and (min-width: 1576px) { + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference { + grid-template-columns: 1fr 1fr; + grid-gap: 1em; } + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item:nth-child(odd) { + grid-column: 1; } + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item:nth-child(even) { + grid-column: 2; } } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item { - grid-column: 1; grid-row: 1; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term { position: relative; @@ -1326,7 +1337,8 @@ article.node--type-frontpage .node__content > section.home-showrooms { width: 100%; padding-bottom: 10em; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term div.visuel img { - max-width: 100%; } + max-width: 100%; + height: auto; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text { position: absolute; bottom: 0; @@ -1344,7 +1356,14 @@ article.node--type-frontpage .node__content > section.home-showrooms { article.node--type-frontpage .node__content > section.home-blabla { background-color: #9458aa; } article.node--type-frontpage .node__content > section.home-blabla .cards-list-home { - position: relative; } + position: relative; + overflow-y: hidden; } + @media only screen and (max-width: 1350px) { + article.node--type-frontpage .node__content > section.home-blabla .cards-list-home { + max-height: 630px; } } + @media only screen and (min-width: 1351px) { + article.node--type-frontpage .node__content > section.home-blabla .cards-list-home { + max-height: 310px; } } article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul { width: 100%; margin: 0; diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index 0256e8e..b482828 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -346,15 +346,32 @@ article.node--type-frontpage{ position:relative; // height:550px; display: grid; - grid-template-columns: 1fr; grid-template-rows: 1fr; + $bp: ($column_width + $column_goutiere )*7; + + @media only screen and (max-width: $bp){ + grid-template-columns: 1fr; + >.field__item{ + grid-column: 1; + } + } + @media only screen and (min-width: $bp + 1px){ + grid-template-columns: 1fr 1fr; + grid-gap: 1em; + >.field__item:nth-child(odd){ + grid-column: 1; + } + >.field__item:nth-child(even){ + grid-column: 2; + } + } + >.field__item{ + grid-row: 1; // position: absolute; // top:0; left:0; // width:100%; height:100%; // overflow: hidden; - grid-column: 1; - grid-row: 1; .taxonomy-term{ position: relative; width:100%; height:100%; @@ -363,6 +380,7 @@ article.node--type-frontpage{ padding-bottom: 10em; img{ max-width: 100%; + height: auto; } } section.text{ @@ -392,8 +410,16 @@ article.node--type-frontpage{ .cards-list-home{ position: relative; - // max-height: 580px; - // overflow-y: hidden; + $bp: ($column_width + $column_goutiere ); + overflow-y: hidden; + + @media only screen and (max-width: $bp * 6){ + max-height: 630px; + } + @media only screen and (min-width: ($bp * 6) + 1px){ + max-height: 310px; + } + ul{ width:100%; margin:0; padding:0;