Respond.js not working on bootstrap.less import

1

Hi there,

I’m trying to get my site looking like a desktop website in Internet Explorer 8, because right now it looks like a mobile screen because of the mobile-first approach.

According to the Bootstrap 3 documentation, adding respond.js enables the use of responsive media queries: http://getbootstrap.com/getting-started/#browsers

When testing the giving examples in IE8, it works perfectly. Now I’m trying to implement this in my roots theme, so I add this conditional to my head.php after wp_head:

<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/assets/js/vendor/respond.min.js"></script>
<![endif]-->

And that works too, because all of my media queries in my app.less file are working correctly now in IE8.
However (and this is kind of important), because of this respond.js limitation:

Respond.js doesn’t parse CSS referenced via @import, nor does it work with media queries within style elements, as those styles can’t be re-requested for parsing.

None of the bootstrap media queries are working with respond because of the @import in app.less:

@import "bootstrap/bootstrap.less";

I tested it, and copied all of the lines from bootstrap/grid.less directly into app.less and then respond.js does work like it should!

Is there a workaround for this problem? I can’t be the only one testing Roots 6.5.1 in IE8?
Thanks a lot!

Cheers, Toine

2

Are you using Grunt?

3

Yes I am using grunt watch to compile to main.min.css

4

If you check main.min.css it shouldn’t have any import rules (except maybe for fonts) as the Grunt concatenation process takes care of them.

5

I know, it doesn’t have any @import rules in it (except for my IcoMoon font) but it seems Respond.js is only working on the app.less file and somehow skips the @import in there?

6

The LESS files don’t get loaded by the browser, so respond.js is only handling main.min.css. So I don’t think it has anything to do with imports.

By copy-pasting grid.less into app.less you have just re-arranged the order the CSS gets loaded, so it’s more likely to be a cascade issue.

Posting a link might help.

7

Yeah that’s what I thought, don’t understand…
But when I paste the grid.less rules, all the responsive media queries do get applied?

Here’s another topic with sort of the same problem:
http://pengbos.com/blog/bootstrap-3-and-ie-8

p.s. I have PM’d you my login credentials for my test environment

8

I got it! respond.min.js version 1.4.0 somehow does NOT work with the Bootstrap CSS.
In the getbootstrap website, they use this version: https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js

and that one DOES work!
Thank god… I thought I was going mental :slight_smile:

1 Like