CODEWITHSUNDEEP
htmlcssmobile
gjw80
gjw80

Reputation: 1078

@media not working correctly for me

I have a css file that looks like this:

#foo{
    width: 35%;
    height: 380px;
}

@media only screen and (max-device-width: 480px) {
    #foo{
        width: 100%;
        height: 100%;
    }
}

When I run the html from a mobile browser it's not displaying in full screen, any idea what needs to be modified? Ive tried Safari and Chrome and neither seem to apply the changes on the mobile device.

Upvotes: 0

Views: 31

Answers (2)

Theodore Brown
Theodore Brown

Reputation: 947

Make sure the meta viewport tag is set with width=device-width:

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

Upvotes: 1

Nick V
Nick V

Reputation: 707

The only thing i can think of is that the device you're testing on actually has a screen larger then 480px.

Testing your code in a browser by making it smaller on my laptop without "device-" works.

#foo{
    width: 35%;
    height: 380px;
}

@media only screen and (max-width: 480px) {
    #foo{
        width: 100%;
        height: 100%;
    }
}

Upvotes: 0

Related Questions