Media queries and two column table in email | Community

Level 4

Question

Media queries and two column table in email

Forum|Forum|10 years ago
January 19, 2016
1 reply
4289 views

I have a Marketo email that I designed in two columns using the WYSIWYG editor. When I send the email to myself it looks as expected on my desktop computer at full screen. However when I resize my screen to what you would see on a mobile device, the first column takes most of the table width and the second column becomes extremely narrow and long to where the text is unreadable. One of my developers says this is due to the way Marketo uses the media query to treat tables. How can I fix/prevent this behavior? Keep in mind I'm not a developer and don't have regular access to one. I depend on the WYSIWYG editor to design emails.

All suggestions are very welcome.

Thanks,

Kathi

Marketo

Level 8

Please provide HTML so we can review and fix, sounds like you don't have the correct class applied to your table so the media query isn't firing.

Kathi_GoscheAuthor

Level 4

Frank,

Here is the full HTML in the body of this post. Is this what you meant?

Thanks for taking a look. I really appreciate it.

-Kathi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd"><html xmlns="w3.org/1999/xhtml" >

<head>

<title>Webinar</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width">

<style type="text/css">

h1 a:active {

color: #2ba6cb !important;

}

h2 a:active {

color: #2ba6cb !important;

}

h3 a:active {

color: #2ba6cb !important;

}

h4 a:active {

color: #2ba6cb !important;

}

h5 a:active {

color: #2ba6cb !important;

}

h6 a:active {

color: #2ba6cb !important;

}

h1 a:visited {

color: #2ba6cb !important;

}

h2 a:visited {

color: #2ba6cb !important;

}

h3 a:visited {

color: #2ba6cb !important;

}

h4 a:visited {

color: #2ba6cb !important;

}

h5 a:visited {

color: #2ba6cb !important;

}

h6 a:visited {

color: #2ba6cb !important;

}

table.button:hover td {

background: #2795b6 !important;

}

table.button:visited td {

background: #2795b6 !important;

}

table.button:active td {

background: #2795b6 !important;

}

table.button:hover td a {

color: #fff !important;

}

table.button:visited td a {

color: #fff !important;

}

table.button:active td a {

color: #fff !important;

}

table.button:hover td {

background: #0f4d8a !important;

}

table.tiny-button:hover td {

background: #0f4d8a !important;

}

table.small-button:hover td {

background: #0f4d8a !important;

}

table.medium-button:hover td {

background: #0f4d8a !important;

}

table.large-button:hover td {

background: #0f4d8a !important;

}

table.button:hover td a {

color: #ffffff !important;

}

table.button:active td a {

color: #ffffff !important;

}

table.button td a:visited {

color: #ffffff !important;

}

table.tiny-button:hover td a {

color: #ffffff !important;

}

table.tiny-button:active td a {

color: #ffffff !important;

}

table.tiny-button td a:visited {

color: #ffffff !important;

}

table.small-button:hover td a {

color: #ffffff !important;

}

table.small-button:active td a {

color: #ffffff !important;

}

table.small-button td a:visited {

color: #ffffff !important;

}

table.medium-button:hover td a {

color: #ffffff !important;

}

table.medium-button:active td a {

color: #ffffff !important;

}

table.medium-button td a:visited {

color: #ffffff !important;

}

table.large-button:hover td a {

color: #ffffff !important;

}

table.large-button:active td a {

color: #ffffff !important;

}

table.large-button td a:visited {

color: #ffffff !important;

}

table.secondary:hover td {

background: #d0d0d0 !important; color: #555;

}

table.secondary:hover td a {

color: #555 !important;

}

table.secondary td a:visited {

color: #555 !important;

}

table.secondary:active td a {

color: #555 !important;

}

table.success:hover td {

background: #457a1a !important;

}

table.alert:hover td {

background: #970b0e !important;

}

p {

margin: 12px 0;

padding: 0;

}

#logo img{

outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: none; display: inline;

}

#socialicons img{

outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: none; display: inline;}

#banner img{

outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: none; display: inline;}

@media only screen and (max-width: 600px) {

table[class="body"] img {

width: auto !important; height: auto !important;

}

table[class="body"] center {

min-width: 0 !important;

}

table[class="body"] .container {

width: 95% !important;

}

table[class="body"] .row {

width: 100% !important; display: block !important;

}

table[class="body"] .wrapper {

display: block !important; padding-right: 0 !important;

}

table[class="body"] .columns {

table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;

}

table[class="body"] .column {

table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;

}

table[class="body"] .wrapper.first .columns {

display: table !important;

}

table[class="body"] .wrapper.first .column {

display: table !important;

}

table[class="body"] table.columns td {

width: 100% !important;

}

table[class="body"] table.column td {

width: 100% !important;

}

table[class="body"] .columns td.one {

width: 8.333333% !important;

}

table[class="body"] .column td.one {

width: 8.333333% !important;

}

table[class="body"] .columns td.two {

width: 16.666666% !important;

}

table[class="body"] .column td.two {

width: 16.666666% !important;

}

table[class="body"] .columns td.three {

width: 25% !important;

}

table[class="body"] .column td.three {

width: 25% !important;

}

table[class="body"] .columns td.four {

width: 33.333333% !important;

}

table[class="body"] .column td.four {

width: 33.333333% !important;

}

table[class="body"] .columns td.five {

width: 41.666666% !important;

}

table[class="body"] .column td.five {

width: 41.666666% !important;

}

table[class="body"] .columns td.six {

width: 50% !important;

}

table[class="body"] .column td.six {

width: 50% !important;

}

table[class="body"] .columns td.seven {

width: 58.333333% !important;

}

table[class="body"] .column td.seven {

width: 58.333333% !important;

}

table[class="body"] .columns td.eight {

width: 66.666666% !important;

}

table[class="body"] .column td.eight {

width: 66.666666% !important;

}

table[class="body"] .columns td.nine {

width: 75% !important;

}

table[class="body"] .column td.nine {

width: 75% !important;

}

table[class="body"] .columns td.ten {

width: 83.333333% !important;

}

table[class="body"] .column td.ten {

width: 83.333333% !important;

}

table[class="body"] .columns td.eleven {

width: 91.666666% !important;

}

table[class="body"] .column td.eleven {

width: 91.666666% !important;

}

table[class="body"] .columns td.twelve {

width: 100% !important;

}

table[class="body"] .column td.twelve {

width: 100% !important;

}

table[class="body"] td.offset-by-one {

padding-left: 0 !important;

}

table[class="body"] td.offset-by-two {

padding-left: 0 !important;

}

table[class="body"] td.offset-by-three {

padding-left: 0 !important;

}

table[class="body"] td.offset-by-four {

padding-left: 0 !important;

}

table[class="body"] td.offset-by-five {

padding-left: 0 !important;

}

table[class="body"] td.offset-by-six {

padding-left: 0 !important;

}

table[class="body"] td.offset-by-seven {

padding-left: 0 !important;

}

table[class="body"] td.offset-by-eight {

padding-left: 0 !important;

}

table[class="body"] td.offset-by-nine {

padding-left: 0 !important;

}

table[class="body"] td.offset-by-ten {

padding-left: 0 !important;

}

table[class="body"] td.offset-by-eleven {

padding-left: 0 !important;

}

table[class="body"] table.columns td.expander {

width: 1px !important;

}

table[class="body"] .right-text-pad {

padding-left: 10px !important;

}

table[class="body"] .text-pad-right {

padding-left: 10px !important;

}

table[class="body"] .left-text-pad {

padding-right: 10px !important;

}

table[class="body"] .text-pad-left {

padding-right: 10px !important;

}

table[class="body"] .hide-for-small {

display: none !important;

}

table[class="body"] .show-for-desktop {

display: none !important;

}

table[class="body"] .show-for-small {

display: inherit !important;

}

table[class="body"] .hide-for-desktop {

display: inherit !important;

}

*[class].deviceWidth {

width: 100% !important; padding: 0px 4px;

}

*[class].footer {

text-align: left !important; padding-left: 12px !important; padding-top: 0px !important; padding-bottom:15px !important;

}

*[class].bottom {

padding-bottom: 15px !important;

padding-top:15px !important;

}

*[class].padd {

padding-top: 0px !important; padding-left: 25px !important;

padding-bottom:15px !important;

}

*[class].small {

padding-left: 5px !important;

}

*[class].big{

padding-right:30px !important;

}

*[class].paddd

{

padding:0 41px 20px !important;

}

*[class].company{

padding-left:20px !important;}

}

@media only screen and (max-width: 400px)

{

*[class].company{

padding-left:10px !important;}

*[class].paddd

{

padding:0 25px 20px !important;

}

*[class].width

{

width:215px !important;

}

table[class="body"] .wrapper

{

padding-left: 10px !important;

padding-right: 10px !important;

}

*[class].small {

padding-left: 0px !important;

}

table[class="body"] .columns.small-width

{

width: 235px !important;

}

}

.partekInfoText{

color: #ffffff;

line-height:15px;

font-size:12px;

}

.templateFooter{

word-break: break-word;

-webkit-hyphens: auto;

-moz-hyphens: auto;

hyphens: auto;

border-collapse: collapse !important;

vertical-align: top;

line-height: 19px;

font-size: 14px;

margin: 0;

padding: 12px 12px 15px 0;

}

td.registerCell{

width: 44% !important;

}

</style>

</head>

<body ><table class="body" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; height:100%; width:100%; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; margin:0; padding:0; " ><tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; margin:0; padding:0; " ><center style="width:100%; min-width:580px; " ><table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:580px; margin:0 auto; padding:0; border:1px solid #cdcdcd; " ><tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; margin:0; padding:0; " align="left" valign="top" ><table class="row" style="display:table !important; border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; padding:0px; " ><tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td class="wrapper last company" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; margin:0; padding:20px 0 0; " align="left" valign="top" ><table width="564" class="twelve columns" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; margin:0 auto; padding:0; " ><tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td width="556" align="center" valign="top" style="text-align:center; word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; margin:0; padding:0px 0px 10px; " ><table width="100%" ><tr ><td width="59%" style="padding:0px 30px; text-align:left; " ><div style="color:#000000; font-size:14px; font-weight:bold; line-height:21px; " ><div class="mktEditable" id="intro_title" >Workshop</div>

</div>

<div style="color:#000000; font-size:23px; font-weight:bold; line-height:26px; " ><div class="mktEditable" id="main_title" ><span style="font-family: arial, helvetica, sans-serif; font-size: 18px;"><span style="font-size: 20px;">{{my.University:default=edit me}}</span><br></span></div>

</div>

</td>

<td width="41%" ><div class="mktEditable" id="logo" ><div align="center"><a href="#"><img src="info.partek.com/rs/partek/images/logo.png" alt="Logo" width="219" height="57" border="0"></a></div>

</div>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">

<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top"></td>

</tr>

<tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; margin:0; padding:10px 0px 0px; " align="left" valign="top" ><table class="twelve columns" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; margin:0 auto; padding:0; " ><tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#222222; font-family:Arial, Helvetica, sans-serif; font-weight:normal; line-height:19px; font-size:19px; margin:0; padding:0 33px 20px; " class="paddd" align="left" valign="top" ><div class="mktEditable" id="text" ><p style="vertical-align: baseline; text-align: left;"><strong style="font-size: 20px;"><span style="font-family: arial, helvetica, sans-serif; color: #b11c1c; line-height: 115%;">Learn How to Analyze Microarray and Next Generation Sequencing Data with Partek Software</span></strong></p>

<p style="vertical-align: baseline; text-align: left;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #000000;">Join us for a complimentary data analysis workshop to learn how to get started with microarray and next generation sequencing (NGS) analysis using Partek software. You will learn to integrate microarray data with NGS data and overcome common analysis challenges. </span></p>

<table border="0" cellspacing="0" cellpadding="10" width="480" align="center">

<tbody>

<tr>

<td style="margin-left: 30px;" rowspan="3" align="left" valign="top">

<p><span style="font-size: 16px; font-family: arial, helvetica, sans-serif;"><u><strong>Agenda</strong></u></span></p>

<p><span style="font-size: 16px; font-family: arial, helvetica, sans-serif;"><strong>Microarray Analysis</strong></span></p>

<p><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;">{{my.Microaray Date and Time:default=edit me}}</span></p>

<div><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;"> {{my.Microarray Agenda:default=edit me}}<br /></span></div>

<div><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;"><strong style="font-family: arial, helvetica, sans-serif; font-size: 16px; line-height: 19px;">Next Generation <br />Sequencing Analysis</strong></span></div>

<p><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;">{{my.NGS Date and Time:default=edit me}}</span></p>

<div><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;"> {{my.NGS Agenda:default=edit me}}<br /></span></div>

</td>

<td style="width: 150px; height: 100px; background-color: #d5d5d5;" align="center" valign="top">

<table cellspacing="0" cellpadding="0" align="center">

<tbody>

<tr>

<td style="border-radius: 0px; color: #ffffff; display: block;" width="135" height="40" align="center" bgcolor="#B11C1C"><a style="font-size: 16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 40px; width: 100%; display: inline-block;" href="partek.com/Training_12.1.15"><span style="color: #ffffff;">Register</span></a></td>

</tr>

</tbody>

</table>

<p><span style="font-family: arial, helvetica, sans-serif; font-size: 9px;">Room number listed <br />in confirmation email</span></p>

</td>

</tr>

<tr>

<td style="width: 150px;" align="center" valign="top">

<p><span style="font-size: 12px;"><span style="font-family: arial, helvetica, sans-serif; line-height: 19px; text-align: left;">This workshop </span><span style="font-family: arial, helvetica, sans-serif; line-height: 19px; text-align: left;">is intended for those with novice or intermediate skills in <br />the subject matter</span></span></p>

</td>

</tr>

</tbody>

</table></div>

</td>

<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>

</tr>

</table>

</td>

</tr>

<tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; background:#303030; margin:0; padding:0; " align="left" bgcolor="#303030" valign="top" ><table class="twelve columns" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; margin:0 auto; padding:0; " ><tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; margin:0; padding:0; " align="left" valign="top" ><div class="mktEditable" id="banner" ><a href="#"><img src="info.partek.com/rs/partek/images/DNA.png" alt="Banner" border="0"></a></div>

</td>

</tr>

</table>

</td>

</tr>

<tr style="vertical-align:top; text-align:left; padding:0; " align="left" ><td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#222222; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:14px; background:#303030; margin:0; padding:0; " align="left" bgcolor="#303030" valign="top" ><table class="row" ><tr ><td class="wrapper" ><table cellpadding="5" class="eight columns templateFooter" ><tr ><td ><div class="mktEditable partekInfoText" id="text10" ><strong>Partek Incorporated: </strong><span>624 Trade Center Boulevard, St. Louis, Missouri 63005 U.S.A. </span><a style="text-decoration: none; color: #ffffff;" href="partek.com/contact">Contact Us</a></div>

</td>

<td class="expander"></td>

</tr>

</table>

</td>

<td class="wrapper last" ><table class="four columns" style="width:180px; " ><tr ><td class="footer templateFooter" style="text-align:right; " ><div class="mktEditable" id="socialicons" ><a href="twitter.com/Partek_Inc"><img alt="Twitter" src="library.marketo.com/rs/marketoreferencelibrary/images/EM-Webinar-v1-Twitter.jpg" border="0"></a></div>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

</body>

</html>

Level 8

Add the attached code to the main body WYSIWYG. All I did was split the <table> into 2 tables, align them left/right and gave them a class of row.

<table border="0" cellspacing="0" cellpadding="10" width="330" align="left" class="row">

<table border="0" cellspacing="0" cellpadding="10" width="150" align="right" class="row">

Please note to get responsive tables to work you need to give them the class that makes them 100% when the media query fires. This line:

table[class="body"] .row {

width: 100% !important; display: block !important;

}

main-body-txt.zip