This is about an email template with each table containing an item with a picture on the right side and the details on the left side with the name/brand name/ size and so on.
I have tried a bunch of different solutions I have found online but I can't get the structure to be responsive enough for all platforms.
Any resource regarding the structure is helpful. I made a picture to describe what the structure looks like.
Another user pointed out that I could show the last template I tried and a resource I used that didn't work out well.
https://codepen.io/Georgeslatina/pen/gOGzavj
<table role="presentation" cellpadding="0" cellspacing="0" width="580" style="margin: auto;height: 220px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 20px;margin-bottom:28px !important;direction:ltr !important">
<tbody>
<tr>
<td colspan="60%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: right; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;height:20%;">
<td colspan="60%" style="">
<div style="word-wrap: break-word;padding-right:12px;font-size:18px"> text2</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 1px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="35%" style="">
<div style="font-size:20px;word-wrap: break-word;padding-right:22%"> text1</div>
</td>
</tr>
<tr>
<td colspan="44%" style="">
<div style="padding-right:10px">
<span> ₪100 </span>
<span style="padding-left:8px"> מחיר</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="24%" style="">
<div style="padding-right:20%">
<span style="padding-left:8px">L </span>
<span>מידה</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="13%" style="padding-right:8px">
<div style="border-radius:50%; width: 11px; height: 11px; border: 2px solid black; margin-left:65%">
<div style="width: 9px; height: 9px;border-radius:50%; margin:auto; margin-top:1px"></div>
</div>
</td>
<td colspan="11%">
<div style="float:left">צבע</div>
</td>
</tr>
<tr>
<td colspan="100%" style="padding-right:30px;height:30px">
<div style="text-align:right">
<span>
reason
</span>
<span style="text-align:right;font-family:NarkisBlockMF;font-size:18px;font-weight: 550;font-stretch: normal;font-style: normal;line-height: 1.28;letter-spacing: normal;color: #000;"> :סיבת החזרה</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="25%" style="position: relative">
<div style="display:block;width:135px; height:180px;text-align: center; font-size: 0; background:url('https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg') no-repeat center; background-size: cover">
</div>
<div style="
position:absolute;
z-index: 1;
bottom:0;
width: 135px;
height: 24px;
opacity: 0.8;
font-family:NarkisBlockMF;
font-size:17px;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>
And the conditional VML in the example down did not work in my tests.
https://stackoverflow.design/email/templates/short-transactional/
Here is a hybrid method of achieving what you have in your image. My code is not dependent on media queries but I have added a class in to make my blocks 100% width in mobile. If that is removed, the row with text3, text2 and text1 will start stacking on their own as it reaches smaller screen size.
I have not put in any pipes/seperators as they can be placed when you add your content in.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Untitled Document</title>
<style type="text/css">
/*not smart phones*/
#media only screen and (max-width:480px) {
.fullWidth{width:100% !important;max-width:100% !important;}
}
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<!-- start 700 pixel container -->
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="fullWidth" style="max-width:700px;">
<tbody>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="max-width: 349px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="175">
<![endif]-->
<div style="max-width: 174px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="175">
<![endif]-->
<div style="max-width: 174px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text3</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;"></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="350">
<![endif]-->
<div style="max-width: 349px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">image</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!-- start 700 pixel container -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</table>
</body>
</html>
Dont set your layout in a single table, seperate them into two tables. Table for content and table for image.
<style>
#media screen and (max-width: 600px) {
.module-wrapper, .grid{
width: 100% !important;
}
.grid{
float: none !important;
}
}
</style>
<table class="module-wrapper" cellpadding="0" cellspacing="0" border="0" width="580" align="center">
<tr>
<td>
<!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%" dir="rtl"><tr><td valign="top" dir="ltr"><![endif]-->
<table class="grid" cellpadding="0" cellspacing="0" border="0" width="135" align="right">
<tr>
<td align="center" style="position: relative">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div style="display:block;width:135px; height:180px;text-align: center; font-size: 0; background:url('https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg') no-repeat center; background-size: cover">
</div>
<div style="
position:absolute;
z-index: 1;
bottom:0;
width: 135px;
height: 24px;
opacity: 0.8;
font-family:NarkisBlockMF;
font-size:17px;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- #end image table -->
<!--[if mso]></td><td valign="top" dir="ltr"><![endif]-->
<table class="grid" role="presentation" cellpadding="0" cellspacing="0" width="445" align="left">
<tr>
<td colspan="60%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: right; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;height:20%;">
<td colspan="60%" style="">
<div style="word-wrap: break-word;padding-right:12px;font-size:18px"> text2</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 1px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="35%" style="">
<div style="font-size:20px;word-wrap: break-word;padding-right:22%"> text1</div>
</td>
</tr>
<tr>
<td colspan="44%" style="">
<div style="padding-right:10px">
<span> ₪100 </span>
<span style="padding-left:8px"> מחיר</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="24%" style="">
<div style="padding-right:20%">
<span style="padding-left:8px">L </span>
<span>מידה</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="13%" style="padding-right:8px">
<div style="border-radius:50%; width: 11px; height: 11px; border: 2px solid black; margin-left:65%">
<div style="width: 9px; height: 9px;border-radius:50%; margin:auto; margin-top:1px"></div>
</div>
</td>
<td colspan="11%">
<div style="float:left">צבע</div>
</td>
</tr>
<tr>
<td colspan="100%" style="padding-right:30px;height:30px">
<div style="text-align:right">
<span>
reason
</span>
<span
style="text-align:right;font-family:NarkisBlockMF;font-size:18px;font-weight: 550;font-stretch: normal;font-style: normal;line-height: 1.28;letter-spacing: normal;color: #000;">
:סיבת החזרה</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table><!-- #end content table -->
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table><!-- #end module-wrapper -->
Then use media query to make your table responsive
If you dont want to use media query try using the method from this article
https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
I tried to use CSS grid for this
#parent-container {
border: 0.2rem solid black;
padding: 1em;
display: grid;
grid-template-columns: repeat(2, 1fr);
place-content: center;
}
#parent-container img {
width: 100%;
height: auto;
border-radius: 0.3rem;
}
.first-container {
height: 100%;
display: grid;
grid-auto-rows: 1fr;
}
.first-container div:nth-child(1) {
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.first-container div:nth-child(2) {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
.first-container div:nth-child(3) {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
.first-container div>div:not(:last-child) {
border-right: 0.2rem solid black;
}
.first-container div {
display: grid;
gap: 0.5rem;
}
.second-container {
display: grid;
place-items: center;
border: 0.2rem solid black;
padding: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="parent-container">
<!-- first container-child -->
<div class="first-container">
<div>
<div>text1</div>
<div>text2</div>
</div>
<div>
<div>text3</div>
<div>text2</div>
<div>text1</div>
</div>
<div>
<div></div>
<div>text2</div>
<div>text1</div>
</div>
</div>
<!-- second container-child -->
<div class="second-container">
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<div>text</div>
</div>
</div>
</body>
</html>
Related
I have an HTML email template that renders very well on all mail clients except the Outlook Desktop application. In the Outlook client, the image, as well as the table elements, are blown up in terms of size leading to a terribly formatted email being displayed. How should I address this issue so that it at least renders well on the Outlook desktop client? I am aware of using conditional logic to add dynamic pixel values depending on what client will be rendering the template but I need to know what styling changes I should make to make Outlook's rendering engine display the template properly. Below is the HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Click Source</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
*{margin: 0; padding: 0;}
body{font-family: 'Montserrat', sans-serif;margin: 0; padding: 0;}
#media(max-width:767px){
h3{font-size: .75em !important;}
p{font-size: 10px !important;}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="max-width:600px; width: 100%; margin: 0 auto;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="top" valign="top">
<img src="https://clicksource.uk/static/images/head.jpg" alt="" style="width: 650px;"/>
</td>
</tr>
<tr>
<td valign="top" align="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 60%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef; padding: 12px; padding-left: 5px; padding-top: 45px;">
<tr>
<td style="width: 30%;">
<img src="https://clicksource.uk/static/images/mobile.jpg" alt="" style="width: 150px"/>
</td>
<td style="width: 50%; text-align: center;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 10px 0;">GET ON THE
TOP 3 OF
GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500;">Hello, {{first_name}} {{last_name}}. It's essential to be at the top
of Google search results. If
your business isn't there,
you're losing potential
customers to your
competitors already in the
top 3.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 40%; background: #f5f5ef;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef;">
<tr>
<td>
<img src="https://clicksource.uk/static/images/location.jpg" alt="" style="width: 250px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 55%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #fff; padding: 20px 0 10px 0; text-align: center;" >
<tr>
<td style="width: 100%; text-align: center; padding: 15px;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 15px 0;">GET YOUR BUSINESS
SHOWN ON GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500; margin: 0; padding: 0 15px;">Google Business Profile is another
crucial element for getting your
business in front of new customers! The
Google business platform allows
business owners greater control over
their information on Google search
results, specifically for their physical
location and service areas.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 45%; padding-right: 10px;align-items: center;" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="https://clicksource.uk/static/images/local-seo-email-video-ph.PNG" alt="Promo vid" width="250px" height="132px"><br>
CLICKSOURCE.CO.UK
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="background: #0C2840; background-size: cover; background-position: center center">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="30" cellspacing="0" width="100%" style="align-items: center;">
<tr>
<td valign="top" style="padding: 15px; width: 20%;">
<img src="https://clicksource.uk/static/images/footer-icon-logo.png" alt="" style="width: 100px;"/>
</td>
<td valign="top" style="text-align: center; padding: 15px; width: 60%;">
<img src="https://clicksource.uk/static/images/footer-logo.jpg" alt="" style="width: 120px;"/>
<ul style="text-align: center; padding: 0; margin: 0;">
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/call.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> 020 3832 2400 </li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/website.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> www.clicksource.co.uk</li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/email.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Hello#clicksource.co.uk</li>
<li style="display: inline-block; list-style: none;color:#fff; font-size: 10px;"><img src="https://clicksource.uk/static/images/location-icon.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Cuffley Place, Sopers Road, EN6 4SG</li>
</ul>
</td>
<td valign="top" style="width: 20%;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The more content I add the bigger the white spaces are. I tested this theory when I started deleting sections and noticed the spacing got smaller. My email is way bigger then this btw, this is just a snippet. This sucks because there's a deadline for this tomorrow for me to submit so any help would be appreciated
<body style="Margin:0;padding:0;min-width:100%;background-color:#FFFFFF;">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {background-color:#dde0e1!important;}
body, table, td, p, a {font-family: sans-serif, Arial, Helvitica!important;}
</style>
<![endif]-->
<center style="width: 100%;table-layout: fixed;background-color:#FFFFFF;padding-bottom: 40px;">
<div style="max-width: 600px;background-color: #fafdfe;box-shadow: 0 0 10px rgba(0, 0, 0, .2);">
<div style="font-size: 0px;color: #953192;line-height: 1px;mso-line-height-rule:exactly;display: none;max-width: 0px;max-height: 0px;opacity: 0;overflow: hidden;mso-hide:all;">
A Follow up to our conversation
</div>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;">
<![endif]-->
<table align="center" style="border-collapse:collapse; table-layout:fixed; border-spacing:0;font-family: 'Raleway', Arial, sans-serif, Helvitica!important;background-color: #FFFFFF;Margin:0;padding:0;width: 100%;max-width: 600px;" role="presentation">
<!-- START LOGO -->
<tr>
<td style="padding: 0;Margin: 0;">
<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing: 0;background-color: #fafdfe;" role="presentation">
<tr>
<td style="text-align: center;">
<div>
<img style="display: block; line-height: 0;" src="http://ibb.co.com/images/Oxbryta_Main_Banner4cae03d152df13c8.jpg" width="600" border="0" alt="Fashion Nova Logo" title="Brand Logo">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END LOGO -->
<!-- START SHOWCASE -->
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;">
<tr>
<td width="100%" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0; max-width: 600px;" role="presentation">
<tr>
<td style="padding-top:0;padding-bottom:0;width:100%;max-width:600px;text-align:center; line-height: 0;">
<div>
<img align="top" src="http://ibb.co.com/images/Showcased30db973e177738b.jpg" alt="logo" width="600" style="border-width:0;display: block; " border="0">
</div>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- SHOWCASE -->
<!-- START SHOWCASE FOOTER -->
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0; background-color: #953192;">
<table width="100%" style="border-spacing:0; max-width: 600px;" role="presentation">
<td style="text-align: center; padding-top: 16px; padding-bottom: 16px; border-right: 1px solid #FFFFFF;">
<a style="text-decoration: none; font-weight: bold; font-size: 14px; color: #FFFFFF;Margin:0;padding: 0;" href="https://www.google.com">Important Safety Information</a>
</td>
<td style="text-align: center; padding-top: 16px; padding-bottom: 16px; ">
<a style="text-decoration: none; font-weight: bold; font-size: 14px; color: #FFFFFF; Margin: 0; padding: 0;" href="https://www.google.com">Full Prescribing Information</a>
</td>
</table>
</td>
</tr>
<!-- END SHOWCASE FOOTER -->
<!-- START CUSTOMER CONTENT -->
<tr>
<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="padding content" style="padding-top:28px;padding-right:47px;padding-bottom:15px;padding-left:48px;width:100%;text-align:left;">
<p style="color:#000000;font-size:16px;font-weight: 500; color: #333;">Dear</p>
<p style="color:#000000;font-size:16px;font-weight: 500; color: #333;">Thank you for meeting with me to talk about Oxbryta. The materials below may help your patients as they start their treatment journey on Oxbryta.</p>
<p style="color:#000000;font-size:16px;font-weight: 500;color: #333;">You can find links to the resources we discussed below. If you have any questions, please don't hesitate to reach out.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END CUSTOMER CONTENT -->
<!-- START 1ST TWO COLUMNS ROW 1 -->
<tr>
<td style="padding-top:35px;padding-right:0;padding-bottom:15px;padding-left:0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="two-columns" style="padding-right:0;padding-left:0;font-size:0;text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td width="280" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table class="column" style="border-spacing:0;vertical-align:top;width:100%;max-width:280px;display:inline-block;" role="presentation">
<tr>
<td class="padding" style="padding-top: 0;padding-right: 0;padding-bottom: 20px;padding-left: 52px;">
<table class="content" style="border-spacing:0;text-align: left;" role="presentation">
<tr>
<td>
<img src="http://ibb.co.com/images/01_columnafad21be3a944f8d.jpg" width="280" alt="" style="border-width:0;width:100%;max-width:280px;height:auto;display:block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="320" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table class="column" style="border-spacing:0;vertical-align:top;width:100%;max-width:320px;display:inline-block;" role="presentation">
<tr>
<td class="padding" style="padding-top: 0;padding-right: 43px;padding-bottom: 0px;padding-left: 0;">
<table class="content" style="border-spacing:0;text-align: left;" role="presentation">
<tr>
<td style="padding-top: 0;padding-right: 10px;padding-bottom: 20px;padding-left: 0;">
<p style="font-size: 22px;font-weight: bold; color: #953192; Margin: 0;padding-bottom: 20px;">Getting Started on Oxbryta Brochure</p>
<p style="font-size: 15px; font-weight: 600; margin: 0; padding-bottom: 0px;">A guide to help educate your patients about Oxbryta. what to expect during the first 30 days, and points of discussion for follow-up appointments</p>
</td>
</tr>
<tr>
<td align="left" style="margin-right: 62px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-spacing:0;">
<tr>
<td align="center" style="border-radius:4px;" bgcolor="#277fd2">
<a href="https://www.google.com" target="_blank"><img src="http://ibb.co.com/images/Download_bannerdbaadb5db3d11822.jpg" alt="">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- 1ST END TWO COLUMNS ROW 1 -->
I've been playing around and can't figure this out, so some advice would be greatly appreciated!
https://codepen.io/chaser87/pen/ZEQvydw
What I want to know deals with just the section headed by Meet your Department. When you shrink down this email, it stacks pretty much how I want it. However, I want to reorder the image and the block of copy in that section. Basically, I want the picture first, then the copy. I've tried doing nth-of-type stuff with elements but isn't working.
For extra background, each section is a 100% table, with a 600 px table within, then another 100% table within.
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<title>Boundless opportunities</title>
<style type="text/css">/*<![CDATA[*//* CLIENT-SPECIFIC STYLES */
body, table, td, hr, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
#media screen and (max-width: 616px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
td {
display: block !important;
}
td img {
display: block !important;
width: 60% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0px 0px 0px 0px !important;
}
h3 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.paragraph-copy {
padding: 20px 15px 20px 15px !important;
font-size: 100% !important;
line-height: 25px !important;
}
.paragraph-align {
text-align: center !important;
}
.social-icons {
padding: 5px 5px 10px 5px !important;
display: inline !important;
width: 15% !important;
}
}/*]]>*/
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table" role="presentation" width="600px">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><img alt="It's your time. Apply in July! Join the Cowboy family as part of #okstate25 and you'll get a free T-shirt!" class="fluid-table" src="https://dummyimage.com/1200x696/000/fff" style="width: 600px;"/>
</td>
</tr>
<tr>
<td class="paragraph-copy" style="padding: 5px 10px 10px 10px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; text-align: left;">
<p>{{First}},</p>
<p>We're excited to welcome you to the {{collegename}}! We look forward to seeing what the future holds for you as a {{major}} major within the Department of {{department}}.</p>
<p>We are here to assist you and look forward to working with you during your time at Generic State University. If we can help you in any way, please let us know. Again, congratulations on taking the next step and joining the {{college}}! </p></td>
</tr>
<!--FIRST ROW WITH PIC-->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 0px 10px 0px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="center" style="padding-top: 15px">
<!--CONTENT-->
<img src="https://dummyimage.com/220x220/000/fff" style="width: 220px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-align paragraph-copy" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 5px 10px 20px 10px"><!--CONTENT-->
<h3>
<span>Meet Your Academic Advisor</span>
</h3>
<p>{{Advisor_Name}}</p>
<p>{{Advisor_Address}}</p>
<p>{{Advisor_Phone_Number}} </p>
<p>{{Advisor_Email}}</p>
<p>{{Advisor_Bio Page}}</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center" style="vertical-align: top;"><!--TWO COLUMNS-->
<table align="" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 10px 10px 10px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="58%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-copy paragraph-align" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 10px 10px 10px 10px"><!--CONTENT-->
<h3>
<span>Meet Your Department</span>
</h3>
<p>The {{Department}} is looking forward to your addition to the {{College}} family! </p>
<p>The main office for your department is located in {{department_address}} and you can reach them by phone at {{department_number}} or by emailing {{department_email}}.</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<!--CONTENT-->
<td align="center" style="padding: 15px 10px 10px 10px;"><img src="https://dummyimage.com/200x200/000/fff" style="width: 200px"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 5px 10px 0px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="center" style="padding: 20px 10px 0px 10px">
<!--CONTENT-->
<img src="https://dummyimage.com/210x210/000/fff" style="width: 210px">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-copy" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 5px 10px 0px 10px"><!--CONTENT-->
<h3>
<span>Mark Your Calendar</span>
</h3>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--CONTENT-->
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 15px 0px 5px 0px; vertical-align: top;"><hr style="border-top: 2px solid #000000; width: 50%;">
<p style="padding-top: 15px;">Bookmark these calendars to stay informed about what's going on:</p>
<p><a style="color: #FE5C00" href="#"><strong>Academic College Calendar</strong></a><strong> | <a style="color: #FE5C00" href="#">College Calendar</a> | <a style="color: #FE5C00" href="#">Athletics Calendar</a></strong></p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table" role="presentation" width="600px">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><img alt="It's your time. Apply in July! Join the Cowboy family as part of #okstate25 and you'll get a free T-shirt!" class="fluid-table" src="https://dummyimage.com/600x95/0fe5c1/fff" style="width: 600px; display: block;" /></td>
</tr>
<!--FIRST ROW WITH PIC-->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="background-color: black">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table align="" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td valign>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="left" style="padding: 10px 0px 10px 10px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 12px; line-height: 18px; color: #FFFFFF"><!--CONTENT-->
<p>College of Engineering <br>
Generic State University<br>
136 Whatever Building | Orlando, FL 00000</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="38%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between"><!--CONTENT-->
<td align="right" style="padding: 25px 15px 20px 0px;"><img alt="OSU's Facebook Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Twitter Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Instagram Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Snapchat Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /></td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add reverse class to the cell containing Meet Your Department section's two columns and use the following CSS in your media query:
td:not(.reverse) {
display: block !important;
}
td.reverse {
display: flex;
flex-direction: column-reverse;
}
I have two row inside a row contains 3 li I want to make in reponsive 2 li
but it's dosn't worrk
PS : ITS FOR EMAIL HTML
demo
http://jsbin.com/fobejarexi/3/edit?html,css,output
So the result should look like this on small screens.
image image
image image
image image
As the comments note, you need <table>s instead of <li>'s if this is for an HTML email. I've included some code below that achieves what you ask.
One caveat: For simplicity purposes, this only works in mobile email clients that support #media queries. So this work in iOS Mail, but not mobile Gmail.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#media (max-width: 600px) {
.table {
width: 100% !important;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" style="width: 600px;" class="table">
<tr>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=1"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=2"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=3"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=4"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=5"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=6"></td>
</tr>
</table>
</body>
</html>
Here's a cleaned up snippet of code I use to shift 2 rows of 3 to 3 rows of 2 on mobile, which works across all platforms, even if they don't support media queries:
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 94%; max-width: 615px;">
<tr><td style="text-align: center; font-size: 0; padding: 15px 0 0px 0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr><td width="200" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<![endif]-->
</table>
</td>
</tr>
</table>
You will want to enhance this with some classes to help it look better on iPhones and older Androids, but it will look okay on the Gmail app.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive email</title>
<style type="text/css">
body {margin: 10px 0; padding: 0 10px; background: #F9F2E7; font-size: 13px;}
table {border-collapse: collapse;}
td {font-family: arial, sans-serif; color: #333333;}
#media only screen and (max-width: 480px) {
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
table {width: 100% !important;}
.responsive-image img {
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="640" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF" style="font-size: 0; line-height: 0; padding: 0 0;" height="140" align="center" class="responsive-image">
<img src="SplashScreen_WithRMBLogo_Font48_36_AgencyFB.png" width="660" alt="" />
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="30"> </td></tr>
<tr>
<td style="padding: 10px 10px 20px 10px;">
<div style="font-size: 20px;">Hey guys,</div>
<br />
<div>
Here is the summary report
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="1" bgcolor="#F9F9F9"> </td></tr>
<tr><td style="font-size: 0; line-height: 0;" height="30"> </td></tr>
<tr>
<td>
<div style="max-height: 300px; max-width: 640px; width: 640px; overflow-x: auto; overflow-y: auto">
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Hello</div>
<div>
Hello moto 1111111111111111111111111111111111111111111111111
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Ask</div>
<div>
How are you moto 22222222222222222222222222222222222222222222222222222222
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Answer</div>
<div>
Cool thanks moto 33333333333333333333333333333333333333333333333333333
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td bgcolor="#A89C83">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td style="font-size: 0; line-height: 0;" height="15"> </td></tr>
<tr>
<td style="padding: 0 10px; color: #FFFFFF;">
v1 Report
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="15"> </td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Here is the code in jsfiddle: http://jsfiddle.net/nq3Re/124/
How do I get the three tables to be stacked horizontally? Currently they stack vertically.
The number of tables need not be just three, it could be N.
The solution to display HTML tables adjacent to each other without having them wrap but rather have a horizontal scroller come up.
CSS:
div.container {
display: inline-block;
}
HTML:
<div style="white-space:nowrap">
<div class="container">
<table border="2">
<tr>
<td>test 1 111111111111111111111111111111111111111</td>
</tr>
</table>
</div>
<div class="container">
<table border="2">
<tr>
<td>test 2 22222222222222222222222222222222222222</td>
</tr>
</table>
</div>
<div class="container">
<table border="2">
<tr>
<td>test 3 33333333333333333333333333333333333333333333</td>
</tr>
</table>
</div>
</div>
The important thing is to float the inner divs by using display: inline-block. The outer (or wrapper) div must have a white-space:nowrap
This is what the result looks like: https://jsfiddle.net/9k8ns73f/
Display them as inline-block:
<div class="container" style="display: inline-block"></div>
This can easily be done with floated divs:
CSS:
div.container {
float: left;
box-sizing: border-box;
text-align: center;
}
HTML
<div class="container">
<!-- Table or even just content here -->
</div>
<div class="container">
<!-- Table or even just content here -->
</div>
<div class="container">
<!-- Table or even just content here -->
</div>
You can add whatever necessary css to .container... you can also add additional css classes to each individual div if needed.
Here is the Fiddle: