WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] My site in IE8 isn't reponsive (13 posts)

  1. Mike Sneed
    Member
    Posted 6 months ago #

    Hi,

    Please see my test site here. It's not responsive in IE8.. I tested it in IE10 which has the developer tools. In IE8 mode/standards it isn't responsive.

    Any thoughts? I've seen that some say I would need to include things like: ccs3-mediaqueries-js or respond.js or html5shiv...

    What should I do? Are these scripts in Customizr already?

    Appreciate the help!
    Michael

  2. Mike Sneed
    Member
    Posted 6 months ago #

    I just loaded up a fresh install locally and at this test site and tested both in IE with the developer tools in IE8 Mode/IE8 Standards as well as testing in IE8 with IE Tester.

    I know IE8 is pretty much out but the company I work for unfortunately uses it.

    Customizr isn't flexing.. it's not responsive. It acts like the site has a min-width and stops flexing at a certain size like a fixed width.

    Please, could someone offer some help?

    Michael

  3. acub
    Member
    Posted 6 months ago #

    Customizr is a theme based on web standards and also makes use of a lot of CSS3 properties, which are not all supported by IE8. Unfortunately, even though IE8's initial marketing slogan was "the first Microsoft web browser to respect web standards", it didn't live up to it.

    So, basically, you need a responsive theme that only uses CSS 2.1 properties or earlier, and Customizr isn't one of them. (Actually I don't think such themes exist, but I might be wrong).

    Another option is to create your own ie8-hacks.css in your child theme and use it to modify the looks of the theme in IE8. You'd conditionally load it by placing this code in your child theme's style.css:

    <!--[if IE 8]>
    @import url("ie8-hacks.css");
    <![endif]-->
  4. Mike Sneed
    Member
    Posted 6 months ago #

    Thanks Acub.. I know you're busy and I appreciate the help..

    As I found that some of my testing was looking ok in Mobile and Ipad and near reasonable in IE8.. this @import piece of code might help. Thanks!

    So, I could make a css file at the same level as the style.css and with the @import call it will bring in those styles obviously commented out for IE8 only..?

    Michael

  5. Mike Sneed
    Member
    Posted 6 months ago #

    This is what it looks like in my stylesheet here is this correct?

    Thanks

  6. Mike Sneed
    Member
    Posted 6 months ago #

    In other words it's not looking like it's commented out in my style.css....

    The code you showed me above isn't darkened out like a css comment would be.. will that still work?

    /* like this would be */

    Thanks,Michael

  7. Mike Sneed
    Member
    Posted 6 months ago #

    I've tested it a bit and the hack code isn't being picked up.. any thoughts on another way to get the hack css sheet into my child theme..

    What about a basic conditional comment with a link to the ie8-hack.css file?

    Michael

  8. acub
    Member
    Posted 6 months ago #

    Well, I thought conditionals work in css too. My bad. They only work in html.
    You need this code in functions.php of your child theme:

    add_action('wp_head', 'add_ie8_custom_css');
    function add_ie8_custom_css {
    echo '<!--[if IE 8]>
    	<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/ie8-hacks.css" />
    <![endif]-->'
    }

    Should work now. I'm sorry I can't test this myself, I don't have IE lower than 10 here and this type of conditionals do not work in IE10 and above.

  9. Mike Sneed
    Member
    Posted 6 months ago #

    Cool function! Thanks acub!
    Be well!
    Michael

  10. Mike Sneed
    Member
    Posted 6 months ago #

    Acub.. I put it into the functions file and I get a parse error..

    Parse error: syntax error, unexpected '{', expecting '(' in C:\wamp\www\customizr\wp-content\themes\customizr-child\functions.php on line 17

    I used this code:

    <?php
    add_action('wp_head', 'add_ie8_custom_css', 0);
    function add_ie8_custom_css() {
    echo '<!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/ie8-hacks.css" />
    <![endif]-->'
    }
    ?>

    As the code you gave me drew an error.. Any thoughts? I'd love to have that code.. nice way to hook into the head and add things!
    Thanks! Michael

  11. Mike Sneed
    Member
    Posted 6 months ago #

    I found so code here that worked from here and used this global style:

    add_action( 'wp_head', 'wps_add_ie_html5_shim' );
    /**
     *  Add IE conditional html5 shim to header
     */
    function wps_add_ie_html5_shim() {
        global $is_IE;
        if ( $is_IE ) {
            echo '<!--[if lt IE 9]>';
            echo '<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>';
            echo '<![endif]-->';
        }
    }

    From Eunus Hosen and adapted it to the code Acub showed me.. it's working!

    Resolved.. Thanks!

  12. acub
    Member
    Posted 6 months ago #

    I now see my echo was missing the trailing ";". Maybe I should only answer tickets when I'm fresh. :)

  13. Mike Sneed
    Member
    Posted 6 months ago #

    No worries.. recently the moderator on a few posts asked me to make sure I knew how to add a link properly.. I was way too tired to figure it out in that moment :)

Reply

You must log in to post.

About this Theme

About this Topic