CODEWITHSUNDEEP
htmlcssmedia-queriesemail-validation
Phillip Money
Phillip Money

Reputation: 117

CSS media calls don't work

I am trying to get the following media calls to work in this email design. Sorry for posting a lot of code. When I get below 660px, the large logo disappears but a smaller logo does not appear in its place. The logo space is blank. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Our Vineyard</title>
        <style type="text/css">

            @media only screen and (max-width: 660px) {
                table.container { width: 480px !important; }
                td.logo img { display: none; }
                td.logo { background: #c2ca19 url(../../My Site/Images/logo_medium.gif) no-repeat 10px 10px; height: 45px; }
            }

            @media only screen and (max-width: 510px) {
                table.container { width: 100% !important; }
                table.container td { border: none !important; }
                td.logo { background: #2cca19 url(../../My Site/Images/logo_small.gif) no-repeat center 10px; height:32px; }
            }

        </style>
    </head> 
    <body bgcolor = "#efe1b0" background="../../My Site/Images/banner_large.jpg">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor = "#efe1b0">
        <tr>
        <td>
        <table class="container" width="640" align="center" border ="0" cellpadding="0" cellspacing="0">
        <tr>
        <td valign="top" class ="logo" bgcolor="#ffffff"  style="padding: 10px 20px 0px 30px; border-left: 1px solid #dbc064; border_right: 1px solid #dbc064; border_top: 1px solid #dbc064;">
        <a href ="#"><img style= "margin-left:-15px" src="../../My Site/Images/logo_large.gif" alt="Our Vineyard" width="585" height="45" border="0"></a>   
        </td>
        </tr>
        <tr>
        <td colspan="2" valign="top" bgcolor="#ffffff" class="headline" style="padding: 15px 20px 5px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;"><h1 style="margin 0px 0px 15px 0px; font-weight: normal;  font-size: 32px; color: #723c7F;">Main Heading Here</h1>
        </td>
        </tr>
        <tr>
        <td valign="top" bgcolor="#f5f2e5" class="banner" style="border-left: 1px solid #dbc064; border-right: 1px solid #dbc064;">
        <img src="../../My Site/Images/banner_large.jpg" width="638" height="180" alt="Photo of our Vineyard"></td>
        </tr>

Upvotes: 1

Views: 72

Answers (1)

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

You missed to add view port meta, add below meta on your head.

<meta name="viewport" content="width=device-width, initial-scale=1">

And you should have your standard css as well.

Upvotes: 2

Related Questions