bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improved grid system with media query in home display

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-07-16 17:58:55 +02:00
parent 53209dbca1
commit 9ba8834a1f
2 changed files with 54 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -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 { article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: 1fr;
grid-template-rows: 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 { article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item {
grid-column: 1;
grid-row: 1; } grid-row: 1; }
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term { article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term {
position: relative; position: relative;
@@ -1326,7 +1337,8 @@ article.node--type-frontpage .node__content > section.home-showrooms {
width: 100%; width: 100%;
padding-bottom: 10em; } padding-bottom: 10em; }
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term div.visuel img { 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 { article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -1344,7 +1356,14 @@ article.node--type-frontpage .node__content > section.home-showrooms {
article.node--type-frontpage .node__content > section.home-blabla { article.node--type-frontpage .node__content > section.home-blabla {
background-color: #9458aa; } background-color: #9458aa; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home { 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 { article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul {
width: 100%; width: 100%;
margin: 0; margin: 0;

36
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@@ -346,15 +346,32 @@ article.node--type-frontpage{
position:relative; position:relative;
// height:550px; // height:550px;
display: grid; display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
$bp: ($column_width + $column_goutiere )*7;
@media only screen and (max-width: $bp){
grid-template-columns: 1fr;
>.field__item{ >.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; // position: absolute;
// top:0; left:0; // top:0; left:0;
// width:100%; height:100%; // width:100%; height:100%;
// overflow: hidden; // overflow: hidden;
grid-column: 1;
grid-row: 1;
.taxonomy-term{ .taxonomy-term{
position: relative; position: relative;
width:100%; height:100%; width:100%; height:100%;
@@ -363,6 +380,7 @@ article.node--type-frontpage{
padding-bottom: 10em; padding-bottom: 10em;
img{ img{
max-width: 100%; max-width: 100%;
height: auto;
} }
} }
section.text{ section.text{
@@ -392,8 +410,16 @@ article.node--type-frontpage{
.cards-list-home{ .cards-list-home{
position: relative; position: relative;
// max-height: 580px; $bp: ($column_width + $column_goutiere );
// overflow-y: hidden; 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{ ul{
width:100%; width:100%;
margin:0; padding:0; margin:0; padding:0;