I have problem. Im using grid areas:
Code: Select all
.div--rows {
height: 100%;
display: grid;
grid-template-columns: 1fr 30px 300px;
grid-template-rows: 253px 30px 1fr 30px 250px;
grid-template-areas:
'header header header'
'hpause hpause hpause'
'content cpause right'
'fpause fpause fpause'
'footer footer footer';
}
Code: Select all
.div--header {
grid-area: header;
background: #fff;
border-left: 0px;
border-right: 0px;
border-bottom: 1px solid black;
border-top: 0px;
}
the problem is that with:
Code: Select all
@media only screen and (device-width: 470px) and (-webkit-min-device-pixel-ratio: 2) and ( min--moz-device-pixel-ratio: 2) {
.div--rows {
height: 100%;
display: grid;
grid-template-columns: 200px 30px 200px 30px 200px 30px 200px;
grid-template-rows: 452px;
grid-template-areas:
'header'
'hpause'
'content'
'cpause'
'right'
'fpause'
'footer'; }
}
2. divs border is not there
3. when I force there background by setting it in the top of the code the background color of the modules isnt white as I declared there.
Im posting this here because its modified cassiopeia.
Thanks for any help!
JurajB