CODEWITHSUNDEEP
cssmedia-queries
copyflake
copyflake

Reputation: 7127

media-query for mobile not working

I'm trying to use media-queries in my CSS for the first time, but I don't seem to be having much luck getting it to work.

To test, I wanted my #page-wrap to resize to 440px when something like an iPhone is looking at the page, but nothing changes. This is what I've used.

@media only screen and (max-device-width: 480px) { #page-wrap {width:440px;} }

I also put this in my header.

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

Is this correct?

Upvotes: 1

Views: 584

Answers (2)

Jason
Jason

Reputation: 3360

Is there a specific reason you're using max-device-width? Unlike max-width, it will not help with people rotating their device or other types of adjustments.

Instead, stick to using max-width, like the following:

@media only screen and (max-width: 300px) { 
    #page-wrap {
        width:100px;
    } 
}

Check out this jsFiddle that illustrates it.

Upvotes: 2

dsdev
dsdev

Reputation: 1124

Try this for your media query:

@media only screen and (max-width: 480px) {}

Upvotes: 1

Related Questions