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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -