1 reply [Last post]
ignatz2000
ignatz2000's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Timezone: GMT-8
Joined: 2009-10-16
Posts: 10
Points: 14

Hi all,

creating an email template and I have two tables that I want to stack, center align when the go below a certain size.

I have most of the css working but I cant figure out how to over ride the inline style with the css style. Any help would be greatly appreciated! Code below

Thanks

Our Vineyard

@media only screen and (max-width: 660px) {
table.container { width: 480px !important;}
td.log img {display: none;}
td.logo { background: #fff url (images/logo_medium.gif) no-repeat 10px 10px; height: 45px; width: 100px;
}
td.headline { padding: 5px 0px opx 30px !important;}
td.headline h1 { font-size: 28px !important;}
table.promo_2 { float: left !important;}

}
@media only screen and (max-width: 510px) {
table.container { width: 100% !important;}
table.container td { border: none !important;}
td.logo { background: #fff url(images/logo_small.gif) no-repeat center 10px; height: 32px;}
td.headline h1 { font-size: 24px !important; text-align: center;}
td.banner { height: 115px; background: url (images/banner_small.jpg) no-repeat right 0px;
}
}

Promo heading here
Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.

Learn more

Promo heading here
Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.

Learn more

© Your Company Name. PLEASE DO NOT REPLY TO THIS MESSAGE:

Your privacy is important to us. Please use this link to unsubscribe.

Lorem ipsum dolor sit amet consectetur adipi sicing elit sed do eiusmod tempor inci didunt ut labore et dolore iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ignatz2000
ignatz2000's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Timezone: GMT-8
Joined: 2009-10-16
Posts: 10
Points: 14

<!DOCTYPE HTML PUBLIC

  <!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.log img {display: none;}
	td.logo { background: #fff url (images/logo_medium.gif) no-repeat 10px 10px;  height: 45px; width: 100px;
	}
	td.headline { padding: 5px 0px opx 30px !important;}
	td.headline h1 { font-size: 28px !important;}
	table.promo_2 { float: left !important;}
 
 
	}
	@media only screen and (max-width: 510px) {
		table.container { width: 100% !important;}
		table.container td { border: none !important;}
		td.logo { background: #fff url(images/logo_small.gif) no-repeat center 10px; height: 32px;}
		td.headline h1 { font-size: 24px !important; text-align: center;}
		td.banner { height: 115px; background: url (images/banner_small.jpg) no-repeat right 0px;
		}
	}
 
          </style>
      </head>	
      <body bgcolor= "efe1b0">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="efe1bo">
              <tr>
                <td>
                 <table class="container" width="640" align="center" border="0" cellpadding="0" cellspacing="0">
 
                  <tr>
                    <td valign="top" bgcolor="3f5f2e5" class="promos" style="padding: 10px 30px 25px 30px; border-right: 1px solid #dbc064; background-color: #f5f2ef; font-family:Arial, Helvetica, sans-serif;">
 
                    <table class="promo_1" width="270" align="left"  >
                        <tr>
                            <td  style="padding: 0px 0px 55px 0px; background-color: #0CF;" >
                            <h3 style="font-size:26px;">Promo heading here</h3>
Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
<br><br>
<a href="#" style=" background-color:#71a412; border-radius: 5px; color: #ffffff; padding: 5px 10px 5px 10px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606;" >Learn more</a>
                            </td>
 
                        </tr>
 
 
                    </table>
                     <table class="promo_2" width="270" align="right">
                        <tr>
                            <td height="100" style="background-color: #0CFEEE; padding: 0px 0px 55px 0px;" >
                            <h3 style="font-size:16px;">Promo heading here</h3>
Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
<br><br>
<a href="#" style=" background-color:#71a412; border-radius: 5px; color: #ffffff; padding: 5px 10px 5px 10px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606;">Learn more</a>
                            </td>
 
                        </tr>
                    </table>
 
                        </td>
                        </tr>
                  <tr>
                    <td valign="top" class="footer" style= "padding: 10px 0px 30px 0px; font-family:Arial, Helvetica, sans-serif; font-size: 11px; color: #b2a16e">
 
 
&copy; Your Company Name. PLEASE DO NOT REPLY TO THIS MESSAGE:
<br><br>
Your <a href="#" style="color:#000000;">privacy</a> is important to us. Please use this link to <a href="#" style="color:#000000;">unsubscribe</a>.
<br><br>
Lorem ipsum dolor sit amet consectetur adipi sicing elit sed do eiusmod tempor inci didunt ut labore et dolore iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </td>
                  </tr>
  </table>
 
          <!-- html goes here -->
 
      </body>	
  </html>