Search code examples
cssipadconditional-statementsmedia-queries

iPad conditional CSS isnt working


I've read several of the questions on here as well as Google looking for stuff and I found a lot bu tfor some reason I can't get mine to work for iPads. I was able to get it working for iPhones but the iPad is still displaying my bg img. These are all the queries I've tried and came up empty handed.

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {

body.custom-background {

    background-color: #FFFFFF;
    background-image: none;

}
}

@media only screen and (min-width: 481px) and (max-width: 1024px) {

body.custom-background {

    background-color: #FFFFFF;
    background-image: none;

}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

body.custom-background {

    background-color: #FFFFFF;
    background-image: none;

}
}

@media handheld and (max-device-width: 480px) {

body.custom-background {

    background-color: #FFFFFF;
    background-image: none;

}
}

Solution

  • May you have Meta in you html head. like this:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    

    with that media query

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    
    body.custom-background {
    
        background-color: #FFFFFF;
        background-image: none;
    
    }
    }