Bootstrap responsiveness not working in ie8 on a wordpress site

1 Views

I created my site as a child theme off of twentythirteen, WordPress. I have integrated Bootstrap and all is working fine. Except in IE8. The page is stuck in mobile view all the time.

I have followed the instructions on Bootstraps page and included the respond.js in my head-tag, after my CSS. I have also included html5shiv. But it is still the same, the page is 100% width and all one column.

Read More

I have also tried setting the http-equiv to x-ua-compatible. My head-tag looks like this: 

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    <?php wp_head(); ?>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/respond.min.js"></script>
    <![endif]-->
</head>

And my LESS stylesheet starts like this:

I know that respond doesn’t work on CSS imported with @import, but the CSS in the first import doesn’t need to be manipulated by respond.js and the Bootstrap-import is a LESS import and the resulting CSS therefore has the entire bootstrap, along with my own, in the same file. 

/*
Theme Name:     Public Web
Description:    Public Web theme, responsive and HTML5 compatible
Author:         Me
Author URI:     http://stinaq.me
Template:       twentythirteen
Version:        1.0.0
*/

@import url("../twentythirteen/style.css");
@import "bootstrap/bootstrap-min.less";

I have tried both the minified version of Bootstrap as well as the regular, and both IE( from compatibility mode and the real IE8. The respond.js is found by the browser, so that can’t be it either.

EDIT:

I’m running the site on a local XAMPP-server and are therefore not trying to access the respond.js via //file but rather localhost

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. i had a similar problem with bootstrap 3 used in wordpress. It worked fine in all browsers exept IE8 and lower. The media query didn’t work anymore. Today i figured out what happend. It was a @import porblem. I included all CSS files directly into the header file like this.

    Code:

    <link href="<?php bloginfo('template_url');?>/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    Now it is working fine.

  2. It seems like the error was something entirely different. I had a different problem earlier that had to do with the html not showing correctly in the inspector. When I created the files again from scratch it suddenly worked. That time I created the files using Sublime instead of Visual Studio, so it seems like the encoding was incorrect.
    More here: https://wordpress.stackexchange.com/users/43535/squ