CODEWITHSUNDEEP
htmlcss
user3818870
user3818870

Reputation: 25

Media queries for tables using csss

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;">[email protected]</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>+61 2 8005 4237<br>
                  <strong>Email:</strong> [email protected]</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.

Upvotes: 0

Views: 1473

Answers (1)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

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)

Upvotes: 1

Related Questions