Media queries for tables using csss - html

Question

HTML Code
<div style="background-color: #e4e4e4">
<table align="center" border="0" cellpadding="0" cellspacing="0" class=
"table" width="600">
<tr>
<td class="cell">
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #FFFFFF" width="100%">
<tr>
<td>
<table>
<tr>
<td><span style="font-size: 10px;color:#666666">If this email
doesn't display properly you can view it in your web
browser<a href="http://www.worldtravelhub.com.au" style=
"text-decoration:underline;color:blue;" target=
"_blank">www.worldtravelhub.com.au</a></span></td>
</tr>
</table>
<table align="center" border="0" cellpadding="10" cellspacing="0"
class="w100">
<tr>
<td><img border="0" height="108" src=
"images/high_quality_logo_wth.png" style="display: block"
width="500"></td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100">
<tr>
<td align="right" class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:22px"><strong>WorldTravelHub</strong></font><br>
<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:18px">Newsletter
</font>--></td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #FFFFFF" width="100%">
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<!--<tr>
<td class="w100"><div class="left_align" face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:11px"><strong>We'll get you the CHEAPEST flights to the</strong></font>
<font><span style="color:#ff5313;font-size:29px;">Indian Subcontinent </span></font>
</div>
</td>
</tr>-->
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<!-- <tr>
<td class="w100">
<img class="stamp" src="images/stamp.png" alt="CHEAPEST GAURANTEE" />
</td>
</tr>-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!--<img src="images/600.png" border="0" style="display:block">-->
<div class="bgimg">
<p class="cheapest"><span class="bold">We'll get you the
CHEAPEST flights to the</span><br>
<span class="indsub">Indian Subcontinent</span></p>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #fff" width="100%">
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0"
class="w100" width="100%">
<tr>
<td class="w100"><span class="checkout-price"><span style=
"font-size:10px;">FROM</span> $850*
<!--<sup style="font-size:8px;margin-top:5px;">From</sup><sub>$850*</sub>--></span></td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<tr>
<td class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:14px"><strong>Lorem ipsum dolor sit amet</strong></font>-->
<div style="text-align: center; margin-right: 30px;">
<span style=
"color: #e62529; font-size: 20px; font-weight: bold;">Toll
Free: 1800 984 045</span><br>
<span style=
"font-size: 11px; letter-spacing: 2px;">info#worldtravelhub.com.au</span><br>
<span style=
"font-size: 11px; letter-spacing: 1px;">www.worldtravelhub.com.au</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: white" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="10" cellspacing="0"
class="w100" width="100%">
<tr>
<td class="w100">
<p style="text-align: center;"><span style=
"font-size: 22px;color:#e62529;letter-spacing:3px;font-weight:bold;">
Book online <span style="color:#000;">24/7</span> at
worldtravelhub.com.au</span><br>
<span style="font-size:8px;">*A Verifiable written quote
from another Australian registered travel businesses must
be aproved and fare quoted must be generally avaliable to
the public in the market and must be for the same date,seat
class,fare category and airline and given to us before we
make a booking for the customer.The quote must be for
booked fares originating in Australia to Indian
subcontinent.Lics No <span style=
"font-weight:bold;">2TA6049</span></span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #888888" width="100%">
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<tr>
<td class="w100"><strong>WorldTravelHub</strong><br>
Suite 4, 2 Kendall St,<br>
Harris Park NSW 2150</td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<tr>
<td align="right" class="w100"><strong>Phone:</strong> +61 2
8005 2797<br>
<strong>Fax:</strong>[phone]<br>
<strong>Email:</strong> info#worldtravelhub.com.au</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td>If this email doesn't display properly you can view it in your
web browser<br>
<br></td>
</tr>
</table>
</td>
</tr>
</table>
</div><!--=========-->
CSS Code
body {
background-color:#e4e4e4;
font-family:'PT Sans Narrow',Arial,sans-serif
}
table {
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0
}
.ExternalClass * {
line-height:100%
}
#media only screen and (max-width: 480px) {
div,p,a,li,td {
-webkit-text-size-adjust:none!important
}
table[class="table"],td[class="cell"] {
width:300px!important
}
img {
display:block!important;
max-width:100%!important
}
[class].hide {
display:none!important
}
[class].w100 {
width:100%!important;
text-align:left!important
}
.cheapest {
margin-left:5px;
font-size:10px;
padding-top:10px;
font-family:'PT Sans Narrow',Arial,sans-serif;
max-width:100%!important
}
.bold {
font-weight:700
}
.indsub {
color:#e62529;
font-size:22px;
font-weight:700
}
.checkout-price {
top:400px
}/*.bgimg {
background-image: url('images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}*/
}
#media only screen and (max-width: 767px) {
div,p,a,li,td {
/*-webkit-text-size-adjust: none !important;*/
}
table[class="table"],td[class="cell"] {
width:300px!important
}
img {
display:block!important;
max-width:100%!important
}
[class].hide {
display:none!important
}
[class].w100 {
width:100%!important;
text-align:left!important
}
.cheapest {
margin-left:5px;
font-size:10px;
padding-top:10px;
font-family:'PT Sans Narrow',Arial,sans-serif;
max-width:100%!important
}
.bold {
font-weight:700
}
.indsub {
color:#e62529;
font-size:22px;
font-weight:700
}
.checkout-price {
top:400px
}
}
.bgimg {
background-image:url(images/wth_map.jpg);
width:100%;
background-size:contain;
background-repeat:no-repeat;
height:0;
padding-bottom:77%;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
background-repeat:no-repeat
}
.checkout-price {
position:absolute;
top:590px;
margin-left:25px;
width:120px;
height:120px;
font:24px/120px Helvetica,Arial,sans-serif;
color:#fff;
text-align:center;
text-shadow:0 -1px 1px rgba(black,.3);
text-indent:-1px;
letter-spacing:-1px;
background:#e54930;
border:1px solid;
border-color:#b33323 #ab3123 #982b1f;
border-radius:60px
}
.checkout-price:before {
content:'';
position:absolute;
top:3px;
bottom:3px;
left:3px;
right:3px;
border:2px solid #f5f8fb;
border-radius:60px
}
.cheapest {
margin-left:80px;
font-size:14px;
padding-top:22px;
font-family:'PT Sans Narrow',Arial,sans-serif
}
.bold {
font-weight:700
}
.indsub {
color:#e62529;
font-size:30px;
font-weight:700
}
From the above code I want to know how can I apply media queries to class Cheapest and checkout-price?
I tried applying simple media queries but it doesn't seem to work I can't find out where am I going wrong.

Answer 1

The problem is you are writing media queries in the beginning. It means first it will check the media query after that it will overwrite by the actual declaration of your class. Two ways you can stop this.
1. Move the media queries to the bottom.
2. Add 'important' keyword in your media queries if you don't want to move bottom.
FIDDE DEMO(I have just moved the media queries to bottom)