improved grid system with media query in home display
This commit is contained in:
parent
53209dbca1
commit
9ba8834a1f
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue