html - @media screen (min-width:1200px) not working in Chrome -
i have problem in @media screen (min-width:1200px)
.
i have set 2 kinds of attributes (classes) image , in css, expecting make image , "td" in put image smaller when resizing screen, when screen more 1200px still shows smaller size of image.
this html :
<tr> <td class="indexphototd"> <img class="indexphoto" src="../wp-content/uploads/2013/05/indexphoto300.jpg" /></td> <td>more stuff here</td> </tr>
this css :
/* browsers larger 1200px width */ @media screen (min-width: 1200px) { .indexphototd { width:300px !important; } .indexphoto { width:300px !important; } } @media screen (min-width: 800px) { .indexphototd { width:200px !important; } .indexphoto { width:200px !important; } }
your media queries overlap: 1200px still 800px or larger. reverse media queries.
@media screen (min-width: 800px) { .indexphototd { width:200px !important; } .indexphoto { width:200px !important; } } @media screen (min-width: 1200px) { .indexphototd { width:300px !important; } .indexphoto { width:300px !important; } }
Comments
Post a Comment