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