How to exclude ie8 and below from applying the media query in my css.

example:

.view-display-id-advertise {
	$zen-column-count: 8;
	$zen-gutter-width: 20px;
	@include zen-grid-container;
	@media all and (min-width: 960px) {
		.views-field-field-image {
			@include zen-grid-item(4, 1);
		}
		.views-field-body {
			@include zen-grid-item(4, 5);
		}
	}
}

Thank you,

Comments

KrisBulman’s picture

Do you want the entire mq to not display at all in IE8? If that's the case, disable respond.js and you're done.

If you want to serve these styles to IE8 as well as to a mq, you should probably track this ticket:

#1539682: Turn off Respond.js by default, use .lt-ie9 rules for IE8 layouts

Here is an interim solution (only lightly tested):

1. Disable respond.js
2.

$ie-layout: true !default;
$ie-layout-breakpoint: 980px;

// This is a standard media query mixin,
// with the option to add a layout for ie8 or lower
// It will bring in all min-width styles without a max constraint
// As well as any styles that meet the 980 threshold. 
@mixin respond-to($min-width, $max-width: false) {
  @media screen and (min-width: $min-width) {
     @if $max-width {
       @media (max-width: $max-width) {
          @content
        }
     } @else {
       @content;
     }
   }
  @if $ie-layout and $min-width <= $ie-layout-breakpoint and (not $max-width or $max-width and $max-width >= $ie-layout-breakpoint) {
    .lt-ie9 & {
      @content;
    }
  }
}

// Here is sample code with the respond-to mixin in place,
// it will add standard mq styles, as well as a lt-ie9 class
// containing the same styles outside of the mq
.view-display-id-advertise {
  $zen-column-count: 8;
  $zen-gutter-width: 20px;
  @include zen-grid-container;
  @include respond-to(980px) {
    .views-field-field-image {
      @include zen-grid-item(4, 1);
    }
    .views-field-body {
      @include zen-grid-item(4, 5);
    }
  }
}

The problem with this solution however is that there is a bug in the '&' selector that does not allow it to be set on base selectors, in order for it to work you need to nest the respond-to mixins inside another selector. (which is why it works here). But it's not a deal breaker.. writing:

#main {
  @include respond-to(980px) {
    margin-left: 2%;
  };
}

Gives the same output as writing this:

@media screen and (min-width: 960px) {
  #main {
    margin-left: 2%;
  }
}

Bug reference: https://github.com/nex3/sass/issues/286

JohnAlbin’s picture

Version: 7.x-5.1 » 7.x-5.x-dev
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.