So the grid view that is explained here does not work in my own document.
This is the code I'm using:
/*GRID VIEW*/
[class*="col"] {
width: 100%;
}
@media only screen and (min-width: 720px) {
.col1 {width: 8,33%;}
.col2 {width: 16,67%;}
.col3 {width: 25,00%;}
.col4 {width: 33,33%;}
.col5 {width: 41,67%:}
.col6 {width: 50,00%;}
.col7 {width: 58,33%;}
.col8 {width: 66,67%;}
.col9 {width: 75,00%;}
.col10 {width: 83,33%;}
.col11 {width: 91,67%;}
.col12 {width: 100,00%;}
}
/*LAYOUT*/
* {
font-family: sans-serif;
border: 0.1px solid black;
}
body {
width: 100vw;
height: 100vh;
overflow-y: scroll;
margin: 0;
}
div {
height: 100px;
background-color: red;
}
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="col3"></div>
</body>
Does anyone see what's wrong? The div has always a width of 100% in my browser (safari)...
Thanks!