How to put columns resize feature like bootstrap using inline css for html email design?
Question
When we use bootstrap CSS in the HTML page there is a Grid layout where a column showing on half-page will expand to the full page if the screen is smaller. In bootstrap, we declare this using grid columns like col-sm-12 and col-md-6 etc.
I am designing an email client where inline CSS is the option for designing but whatever div size we put for web browser does not work well for mobile as it does not resize. Do you have any suggestions please how to achieve the same feature as bootstrap in email template using inline CSS?
1 answers
solution1
2 ACCPTED 2022-02-28 05:54:46
Typically we will want to make the default mobile-first, which is also the approach that Bootstrap takes. So that means 100% width by default.
For desktops then, which is typically anything above 600px (vary as desired), we want the width to be half.
In fact, there is also stacking involved in this so let's say there are two columns at 300px each for desktop.
You say "inline" but I think that's a general HTML Email thing. We are in fact allowed some CSS.
What I've got is a 100% width for anything below 600px (the width of the email). Otherwise, it's half (and the second column comes alongside it).
<!-- /* GENERAL BOILERPLATE */ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" 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" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css">
@-ms-viewport {
width: device-width;
}
</style>
<!-- /* COLUMN WIDTH FOR DESKTOPS (BUT NOT OUTLOOK DESKTOP ON WINDOWS) */ -->
<style type="text/css">
@media screen and (min-width:600px) {
.column {
max-width:300px!important;
}
}
</style>
</head>
<!-- END HEAD -->
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
<center id="wrapper" class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<div style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
<tr>
<td class="two-column" style="padding:0;border-collapse:collapse;background-color:blue;font-size:0;" >
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" role="presentation">
<tr>
<!-- /* OUTLOOK WIDTH */ -->
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<!-- /* MAX-WIDTH 100% by DEFAULT, WILL GET OVERRIDDEN ON DESKTOP */ -->
<div class="column" style="width:100%;max-width:100%;display:inline-block;vertical-align:top;background-color:red;font-size:16px;">
<p>Spicy jalapeno bacon ipsum dolor amet occaecat enim andouille capicola tempor mollit shoulder cillum biltong ea labore dolore id strip steak. Picanha sausage laboris turducken non. Nostrud kevin laborum beef. Doner prosciutto leberkas cow, salami landjaeger fugiat tri-tip pancetta voluptate cillum ullamco. Meatloaf tri-tip sed, laboris bacon sunt ut aliquip kielbasa in nostrud.</p>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<!-- /* OUTLOOK WIDTH (2nd column) */ -->
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<!-- /* (2nd column) */ -->
<div class="column" style="width:100%;max-width:100%;display:inline-block;vertical-align:top;background-color:green;font-size:16px;">
<p>Hot and Spicy jalapeno bacon ipsum dolor amet occaecat enim andouille capicola tempor mollit shoulder cillum biltong ea labore dolore id strip steak. Picanha sausage laboris turducken non. Nostrud kevin laborum beef. Doner prosciutto leberkas cow, salami landjaeger fugiat tri-tip pancetta voluptate cillum ullamco. Meatloaf tri-tip sed, laboris bacon sunt ut aliquip kielbasa in nostrud.</p>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
Why not flex? Flex is not supported on Outlook, but we can do other code for Outlook. But flex is also not supported on Gmail iOS/Android where the user does not use a Gmail account. So I don't think it's quite ready for prime-time yet.
Width:100% & max-width:100% get us through the mobile experience by making each block the full width of the available screen.
But once we hit desktop terrain (600px in this case; being the max-width of the template), we'll need to switch to a max-width of 300px (50%). That's where the @media query comes in which is supported surprisingly well on all desktops except for Outlook.
Outlook gets its own table with two td's at 50%, with its proprietary conditional code (if mso).
This has been tested on all major email environments. For those very few desktop environments that do not support @media queries, they will get the mobile version: that is, full width stacked columns. It's a pretty nice fallback for these 0.01% of users.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.