Can't get responsive column counts to work
I'm trying to get responsive column counts to work using version 0.2.2. The css below works correctly when refreshing the page at different widths, but when resizing the page, the column counts aren't responsively updating. Can you tell me what you think is wrong? I appreciate it!
.deckgrid[deckgrid]::before { font-size:0; visibility:hidden; }
.deckgrid .column { float: left; }
@media screen and (max-width: 480px){ .deckgrid[deckgrid]::before { content: '1 .column.column-1-1'; }
.deckgrid .column-1-1 {
width: 100%;
}
}
@media screen and (min-width: 481px) and (max-width:960px) { .deckgrid[deckgrid]::before { content: '2 .column.column-1-2'; }
.deckgrid .column-1-2 {
width: 50%;
}
}
@media screen and (min-width: 961px){ .deckgrid[deckgrid]::before { content: '4 .column.column-1-4'; }
.deckgrid .column-1-4 {
width: 25%;
}
}
So the css above is working above in Firefox and Chrome. It's IE11 in which it doesn't work. Any ideas?
Okay, good to know, that it does not work in IE11. I will take a look at it as soon as I can. Thanks for reporting this problem.