My media query doesn't work on my android device
css, media-queries, mobile
Solution
If you are specifically targeting android device, or any device with `480x800` try this
@media only screen and (min-device-width: 480px) {
/* Style goes here */
}
A pretty good article if you like to read
Problem
My media query works fine in pc's browser when i re-size it, but when i access my website through localhost with my android device, my media query doesn't work? What can the problem be? My device has 480 x 800 pixels resolutions. Here is my media query: ``` @media (max-width: 480px) { #main{width:90%;position:relative;} div.itemRelated ul li {float: left;width: 20%;} div.itemRelated ul li a img{width:90%;} div.itemRelated ul li a{text-align:center;} .maincontent{width:90%;font-size:.7em;} #base{width:100%;} h2, h2 a:link, h2 a:visited{font-size:.7em;} #container_header{width:96%;} #container_slideshow{display:none;} #container_main{width:90%;margin: 0 auto;} .wrapper960{margin:0 auto;}/*ova treba da se cepne*/ #sidecol_b, #sidecol_a{display:none;} #content_remainder{width:96%;clear:both;top:0;} #container_bottom_modules{display:none;} #container_spacer3{display:none;} #jazik{float:left;} .sigProContainer sigProClassic sigProClassic{margin-left:10%;} #hornav{padding-left:5px;} #hornav ul li a{font-size:1em;padding: 0 5px;width:8%} #container_header{width:100%;} #socialmedia{display:none;} #search {clear:both;top: 20%;left: 15%;} .content{width:66%;} } ```