Having trouble displaying a table on mobile using Google Chrome? It works fine on desktop and Samsung Internet. Tested on different devices but no luck.
If you can help, please visit
CSS:
@media screen and (min-width: 768px) {
table.table_seapoint{
width: auto;
position: relative;
margin-top: -50px;
text-align: center;
}
table.table_seapoint_mobile
{display: none;}
}
@media screen and (max-width: 770px) and (orientation : portrait) {
table.table_seapoint_mobile{
margin-top: -50px;
width: 100%;
position: relative;
text-align: center;
margin-bottom: -60px;
}
table.table_seapoint {
display: none;
}
}
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
...Table content here...
</table>
...Mobile Table content here...
</table>
<div class="stuff">[recent_products per_page="3" columns="3" orderby="title" order="ASC" paginate="true" category="featured" width=300px]</div>
UPDATE - Changed CSS but the issue persists:
@media (max-width: 599px) {
...CSS rules...
}
@media (min-width: 600px) {
...CSS rules...
}
@media (min-width: 900px) {
...CSS rules...
}
@media (min-width: 1200px) {
...CSS rules...
}
@media (min-width: 1800px) {
...CSS rules...
}