Search code examples
cssresponsive-designmedia-queries

Media queries showing up differently on iPhone

I'm trying to make my website somewhat responsive by using media queries however they don't seem to be working.

Here is what it is supposed to look liked:

http://mobt.me/3tPS

And here is the actual website:

http://sandbox.rdonohue.ca/

But when I pull up the actual website on my phone I see the full website except the websites name is centered. I searched for the media query for iPhone 5 so I could see what it looks like but like I said it doesn't appear to be working.

Here is my CSS:

@media only screen and (min-device-width : 320px){

.titleName {
    text-align: center;
    padding-left: 0px;
}

.landingImage {
    height: 200px
}

.mainContentTitle {
    text-align: center;
    width: 100%;
}

.mainContentTitle h5 {
    padding-left: 10%;
}

.mainContentSnippet {
    width: 90%;
}

}

Ryan

Solution

  • Here is the iPhone5 media query: @media only screen and (min-device-width : 320px) and (max-device-width : 568px)

    You may also need to target the pixel density as well for retina screens: -webkit-min-device-pixel-ratio: 1.5 min--moz-device-pixel-ratio: 1.5 -o-min-device-pixel-ratio: 3/2

    Also double check that there is no css after the media query that would override it.