Media Queries - Lost grid

[jaydickinson]

I know media queries don't work but in I8 I was trying out lost grid and got this polyfill working perfectly but If i add a media query with a lost-column/lost grid inside it just breaks the page and shows nothing at all in I8 all the elements disappear.

Above Works

Below would break it and show nothing

Is this expected? or is there a way to just show the original before the media query if i remove the query the content shows as expected is there a workaround? I'd be happy just to lock the grid at a fixed width for I8 and have the polyfill work

Thanks
Jake

[rodebert]

Hi,

can you show me the generated CSS and do you use a polyfill for media-queries?

Cheers

[jaydickinson]

The CSS that is being generated for that section is below. I'm using https://github.com/shinnn/lt-ie-9 which has respond bundled in, but with this script removed or added I get the same thing happening whenever I call lost-columns again in the media query.

Thanks

.front-page div {
  width: calc(99.99% * 1/4 - (10px - 10px * 1/4));
  float: left;
  background: red;
  height: 200px; }

.front-page div:nth-child(n) {
  float: left;
  margin-right: 10px;
  clear: none; }

.front-page div:last-child {
  margin-right: 0; }

.front-page div:nth-child(0n) {
  margin-right: 0; }

.front-page div:nth-child(0n + 1) {
  clear: left; }
  .front-page div:nth-child(2n) {
    background: #d51852; }
  .front-page div:nth-child(3n) {
    background: #ee658f; }

  @media screen and (max-width: 600px) {
    .front-page div {
      width: calc(99.99% * 1/2 - (10px - 10px * 1/2));
      margin-bottom: 10px; }
    .front-page div:nth-child(n) {
    float: left;
    margin-right: 10px;
    clear: none; }
    .front-page div:last-child {
    margin-right: 0; }
    .front-page div:nth-child(2n) {
    margin-right: 0; }
    .front-page div:nth-child(2n + 1) {
    clear: left; } 
}