Hello paano ko po ba gagawing responsive yung lahat ng grid na para sa mobile device?
Code:
body {
text-align: center;
font-family: "Dosis";
}
.grid-container {
display: grid;
grid-template-columns: 0.25fr 10px 0.75fr;
grid-template-rows: auto 20px auto 20px auto 20px auto;
}
.grid-element {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 2em;
}
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background: #69F;
}
.sidebar {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 6;
background: #6F9;
}
.main {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #F69;
height:400px;
}
.extra {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #9F6;
}
.footer {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 7;
grid-row-end: 8;
background: #F96;
}
@media only screen and (max-width:600px) {
/* Responsive for mobile*/
.grid-container > div{
width: 100%;
}
}