Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] IExplorer ignoring my media queries?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #191434
    tbarko
    Participant

    Trying to make this static site (http://insightfultreasures.com/) responsive. Everything seems to be working adequately in Chrome and Firefox, but even Explorer 11 has no clue what’s going on with the media queries. I am self taught with much to learn and I’m sure there must be a better way than what I have done, but at least it’s adequate, still I have no idea how to fix it in Explorer. I used the Boilerplate template and I thought normalize.css was supposed to make it cross platform compatible, but something’s wrong somewhere. Help would very much be appreciated. Thanks.
    redesign found here: http://barkodesign.com/Faith/

    #191435
    Paulie_D
    Member

    You seem to have multiple sets of media queries

    Line 190
    Line 299

    Whether this is the issue I don’t know.

    #191436
    Paulie_D
    Member
    #191444
    Senff
    Participant

    I think you’re just missing some closing brackets for media queries here and there. Once that happens, IE will ignore them.

    For example:

    @media screen and (max-width: 837px) {
        nav {margin-top: -14%;}
    
    @media screen and (max-width: 825px) {
        #grow h1 {width: 50%;}
        #right_top h2 {font-size: 1.25em;}
        #right_bottom h2 {font-size: 1.15em;}
        footer {margin-top: .5%;}
    }
    
    @media screen and (max-width: 785px) {
        nav {margin-top: -14.5%;}
    
    @media screen and (max-width: 790px) {
        #outer_wrap {width: 100%;}
        nav {margin-top: -15%;}
    }
    

    Should be:

    @media screen and (max-width: 837px) {
        nav {margin-top: -14%;}
    }
    
    @media screen and (max-width: 825px) {
        #grow h1 {width: 50%;}
        #right_top h2 {font-size: 1.25em;}
        #right_bottom h2 {font-size: 1.15em;}
        footer {margin-top: .5%;}
    }
    
    @media screen and (max-width: 785px) {
        nav {margin-top: -14.5%;}
    }
    
    @media screen and (max-width: 790px) {
        #outer_wrap {width: 100%;}
        nav {margin-top: -15%;}
    }
    
    #191460
    tbarko
    Participant

    Thanks, Paulie_D and Senff, for taking the time to look at this. As you both pointed out I omitted a couple of brackets. Thought I had double checked it, but obviously missed those. Working now thanks.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.