CODEWITHSUNDEEP
htmlcsswordpress
Michelle
Michelle

Reputation: 549

Website not showing in Google Chrome on Phone

I have 2 version of a table I want to show, depending on the device. It all works fine on desktop but on mobile, I can't get the table to show using google chrome.. it does work with samsung internet though. I have an S9.. but i've tested it on a note 8 as well as it doesn't work.

Can someone please tell me what i'm doing wrong. The webpage is https://ffe-dev.flowersforeveryone.co.za/sea-point/

The CSS is - 

@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 (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) {

    table.table_seapoint{
 width: auto;
 position: relative;
 text-align: center;
 margin-top: -50px;
}
    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 is - 

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<table class="table_seapoint">
<tbody>
<tr>
<td rowspan="10"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/test_image.jpg" alt="" width="250" height="219" /></td>
<td colspan="4">
<h1 style="font-weight: lighter;">STUNNING LUXUARY FLOWER BOUQUETS</h1>
</td>
</tr>
<tr>
<td colspan="4">
<h1 style="font-weight: lighter;">FRESHLY CUT AND HAND DELIVERED</h1>
</td>
</tr>
<tr>
<td colspan="4">
<h1 style="font-weight: lighter;">IN SEA POINT AND</h1>
</td>
</tr>
<tr>
<td colspan="4">
<h1 style="font-weight: lighter;">ACROSS THE WESTERN CAPE</h1>
</td>
</tr>
<tr>
<td><img class="valign size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;" colspan="3">BEST PRICE PROMISE</td>
</tr>
<tr>
<td style="padding-left: 10px;" colspan="3">100% MONEY BACK GUARANTEE</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;" colspan="3">QUICK AND EASY ONLINE ORDERING</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;" colspan="3">24/7 CUSTOMER SUPPORT</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;" colspan="3">HAPPINESS ASSURED</td>
</tr>
<tr>
<td colspan="4">
<h1 style="font-weight: lighter;">ORDER BEFORE 12PM FOR NEXT DAY DELIVERY</h1>
</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-4385" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/phone-1.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;" nowrap="nowrap"><b> 079 885 9609 </b></td>
<td style="padding-left: 30px;"><img class="alignnone size-full wp-image-4386" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/envelope-1.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;"><b> [email protected] </b></td>
</tr>
</tbody>
</table>
<table class="table_seapoint_mobile">
<tbody>
<tr>
<td style="text-align: center;" colspan="4"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/test_image.jpg" alt="" width="60%" height="60%" /> :</td>
</tr>
<tr>
<td style="text-align: center;" colspan="4">
<h1 style="font-weight: lighter;">STUNNING LUXUARY FLOWER BOUQUETS</h1>
</td>
</tr>
<tr>
<td style="text-align: center;" colspan="4">
<h1 style="font-weight: lighter;">FRESHLY CUT AND HAND DELIVERED</h1>
</td>
</tr>
<tr>
<td style="text-align: center; padding-bottom: 7px;" colspan="4">
<h1 style="font-weight: lighter;">IN SEA POINT AND ACROSS THE WESTERN CAPE</h1>
</td>
</tr>
<tr>
<td style="padding-left: 40px;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" />
BEST PRICE PROMISE</td>
</tr>
<tr>
<td style="padding-left: 40px;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" />
MONEY BACK GUARANTEE</td>
</tr>
<tr>
<td style="padding-left: 40px;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" />
QUICK AND EASY ONLINE ORDERING</td>
</tr>
<tr>
<td style="padding-left: 40px;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" />
24/7 CUSTOMER SUPPORT</td>
</tr>
<tr>
<td style="padding-left: 40px;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" />
HAPPINESS ASSURED</td>
</tr>
<tr>
<td colspan="4">
<h1 style="font-weight: lighter;">ORDER BEFORE 12PM FOR NEXT DAY DELIVERY</h1>
</td>
</tr>
<tr>
<td style="text-align: center;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/phone-1.jpg" alt="" width="25" height="25" />079 885 9609</td>
</tr>
<tr>
<td style="text-align: center;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/envelope-1.jpg" alt="" width="25" height="25" /><b>[email protected]</b></td>
</tr>
</tbody>
</table>
<div class="stuff">[recent_products per_page="3" columns="3" orderby="title" order="ASC" paginate="true" category="featured" width=300px]</div>

UPDATE - I have changed the CSS to the below - but it still doesn't work - 

@media (max-width: 599px) { 
table.table_seapoint_mobile{
  margin-top: -50px;
    width: 100%;
 position: relative;
 text-align: center;
margin-bottom: -60px;
}
    table.table_seapoint {
        display: none;
    }
}

@media (min-width: 600px) {
table.table_seapoint_mobile{
  margin-top: -50px;
    width: 100%;
 position: relative;
 text-align: center;
margin-bottom: -60px;
}
    table.table_seapoint {
        display: none;
    }   
}


@media (min-width: 900px) {
table.table_seapoint{
 width: auto;
 position: relative;
 text-align: center;
 margin-top: -50px;
}
    table.table_seapoint_mobile
    {display: none;}

}

 @media (min-width: 1200px) { table.table_seapoint{
 width: auto;
 position: relative;
 text-align: center;
 margin-top: -50px;
}
    table.table_seapoint_mobile
    {display: none;}

}

  @media (min-width: 1800px) { 
        table.table_seapoint{
 width: auto;
 position: relative;
 text-align: center;
 margin-top: -50px;
}
    table

Upvotes: 0

Views: 76

Answers (1)

Vch Cvh Hvc
Vch Cvh Hvc

Reputation: 276

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

by https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/

Try some of these media queries instead.

using the portrait media query is pretty glitchy, and I wouldn't use it.

Upvotes: 1

Related Questions