I can't seem to figure out what's wrong here and my mind is blank.
I have 2 tables - one for desktop users and one for mobile users. I attempted to hide one using the display none property in my code.
.mobile{display: none;}
This CSS was meant to hide the mobile table on desktop:
@media only screen and (min-width : 320px) {
.desktop{display: none;}
.mobile{ display:block;}}
And this was the code for hiding the desktop table on mobile devices.
Here is the HTML snippet as well:
<table class="desktop">
<tr>
<td><img src="images/aqu-landing_icon-win.png"></td>
<td><img src="images/aqu-landing_icon-mac.png"></td>
<td><img src="images/aqu-landing_icon-and.png"></td>
<td><img src="images/aqu-landing_icon-ios.png"></td>
</tr>
<tr>
<td>Windows PC</td>
<td>Apple PC</td>
<td>Android Device</td>
<td>iOS Device</td>
</tr>
</table>
<table class="mobile">
<tr>
<td><img src="images/aqu-landing_icon-and2.png"></td>
<td><img src="images/aqu-landing_icon-ios2.png"></td>
</tr>
<tr>
<td>Android Device</td>
<td>iOS Device</td>
</tr>
</table>
Do you think this setup will work as intended?