Having an issue with the @media screen (min-width:1200px).
I've defined 2 classes in the CSS to make an image and the corresponding "td" element smaller when the screen is resized. However, even when the screen width exceeds 1200px, the image remains small.
This is the HTML snippet:
<tr>
<td class="indexphototd">
<img class="indexphoto" src="../wp-content/uploads/2013/05/indexphoto300.jpg" /></td>
<td>more stuff here</td>
</tr>
This is the CSS code:
/* for browsers larger than 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;
}
}