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

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

@ -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;