CODEWITHSUNDEEP
htmlcss
riseagainst
riseagainst

Reputation: 430

@media only screen css not working on galaxy s4

I'm not sure this is only happens on the galaxy S4, but its what I'm using to test it.

I striped the code down to a bare minimum.

Changed the colors just to test the code. Regular css works, mobile version doesn't get triggered.

Thank you,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>test</title>

<style type="text/css">
@media only screen and (max-device-width : 480px) {

#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;    
}

}

#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}
</style>
</head>

<body>

<div id="aaa">test</div>

</body>
</html>

Upvotes: 0

Views: 127

Answers (1)

Fahad Hasan
Fahad Hasan

Reputation: 10506

It's not working because you're adding the media-query before your actual CSS. Also, you can simply use @media (max-width: 480px) { //styles here for devices whose screen size is less than 480px } instead of @media only screen and (max-device-width: 480px) { //styles here } This should work perfectly:

<style type="text/css">
#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}

@media (max-width: 480px) {

#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;    
}

}
</style>

Here's a working demo. You can try reducing the width of the result's window and see the styles of the text changing when the window size is reduced beyond 480px.

Upvotes: 2

Related Questions