As a newcomer to media queries and .net, I find myself struggling with the code below. At max-width 775px, my goal is to have the first td disappear completely and be replaced by the second td. However, it seems that while the first td becomes 'invisible,' it still takes up space. The borders are there as visual guides.
@media screen and (min-width:776px) {
.hidey {
border: 1px solid blue;
}
.hidey2 {
display: none;
border: 1px dashed red;
}
}
@media screen and (max-width:775px) {
.hidey {
border: 1px dashed blue;
display: none;
}
.hidey2 {
border: 1px solid red;
}
}
<table>
<tr>
<th>Blah:</th>
<td class="hidey" style="width: 20em; "><span>td one</span>
</td>
<td class="hidey2" style="width: 20em;"><span>td two</span>
</td>
</tr>
</table>