CODEWITHSUNDEEP
htmlcssresponsive-designcss-tablesemail-templates
Jaime Montoya
Jaime Montoya

Reputation: 7701

How to make HTML table responsive for email template when using an external CSS file is not a possibility

I created an email template that uses a two-column layout. This was my approach:

<table>
    <tr>
      <td colspan="2" align="center">
          <h1>Header of my email template</h1>
      </td>
    </tr>
    <tr>
        <td>
            <img src="image1.jpg" alt="Image 1" />
        </td>
        <td>
            <img src="image2.jpg" alt="Image 2" />
        </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
          <p>Footer of my email template</p>
      </td>
    </tr>
</table>

It works great on desktop! I have a two-column layout exactly as I wanted it. The problem is on phones because screens are too small for a two-column layout. I need one picture per row, not two, for mobile devices. What I could do is to use float:left;width:100% for the <td> elements that contain the images so that I have the one column layout that I need. However, that float:left;width:100% should apply only when @media screen and (max-width:450px) for example. But there is no way to use @media screen and (max-width:450px) using inline CSS. Remember, this is for an email template. So I cannot invoke external CSS files or add CSS to the <head> of the page because this is code that will be sent for an email template.

I found at https://kb.benchmarkemail.com/using-css-in-html-emails/ this advice, but that is not a solution for responsive tables:

Things To Do

Use tables for layout. Tables are more consistently supported. We recommend that you place your CSS code inline to your content. It should look something like this: Your content here.... Declare width, cellpadding, and cellspacing for all tables and table cells. This will result in a fixed width for the template. Use hspace and vspace tag attributes to add whitespace around an image. Margin and padding inline styles are supported by most, but not all email clients

Any ideas? Thank you.

Upvotes: 0

Views: 6829

Answers (2)

Jaime Montoya
Jaime Montoya

Reputation: 7701

Google offers CSS support: https://developers.google.com/gmail/design/css as A. Meshu pointed out in his comments to my question.

I found at https://templates.mailchimp.com/development/responsive-email/ that they say this:

"You can leave the media query styles in the <head> of your email, as clients that support media queries don’t strip out the <head> or <style> areas."

That made me think I had to send a complete <HTML> document, so I even included <html><head><style type="text/css">..........</style></head><body>...........</body></html>.

For my other email templates I just send code for the <body>. I start the template with a <div> and everything works. But for this template now I am using this structure:

<html>
<head>
<style type="text/css">
@media screen and (max-width:450px) {
    .responsive {
        float:left!important;
        width:100%!important
    }
}
</style>
</head>
<body>
..........
</body>
</html>

Thanks to A. Meshu for providing very important hints in his comments to my question to figure it out.

Upvotes: 1

R Greenstreet
R Greenstreet

Reputation: 740

Since table elements are block-level, I would say to change those tds into nested tables like it's 1999, and then float the first one left:

<table>
    <tr>
      <td colspan="2" align="center">
          <h1>Header of my email template</h1>
      </td>
    </tr>
    <tr>
        <td>
            <table style="float:left;">
                <tr>
                    <td>
                        <img src="image1.jpg" alt="Image 1" />
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                    <img src="image2.jpg" alt="Image 2" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
          <p>Footer of my email template</p>
      </td>
    </tr>
</table>

Upvotes: 0

Related Questions