CODEWITHSUNDEEP
htmlcsshtml-tablehtml-emailmailchimp
Sergi
Sergi

Reputation: 1240

Email layout. Changing tr order in responsive table

I'm creating a layout for a newsletter. Usually this has to be pretty static but I'm using the Mailchimp guideline to achieve some responsiveness. It works well but the problem is that I would like the second image to come before the text (the problem is very obvious in the example link, it's hard to explain). Basically I would like to achieve something like you could do with Bootstrap using push and pull for example where an image that is placed second becomes first when resizing.

So image and then text when the layout is a single column.

Example: https://codepen.io/SergiOca/pen/vmqMoZ?editors=1010

 @media only screen and (max-width: 480px){
        #templateColumns{
            width:100% !important;
        }
    .templateColumnContainer{
        display:block !important;
        width:100% !important;
    }

    .columnImage{
        height:auto !important;
        max-width:480px !important;
        width:100% !important;
    }

    .leftColumnContent{
        font-size:16px !important;
        line-height:125% !important;
    }

    .rightColumnContent{
        font-size:16px !important;
        line-height:125% !important;
    }
}

<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                     <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                         <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>

            </table>
        </td>
    </tr>
</table>



<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                      <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>

                    </td>
                </tr>

            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">

                    <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

            </table>
        </td>
    </tr>
</table>


<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                     <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                         <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>

            </table>
        </td>
    </tr>
</table>

Upvotes: 0

Views: 2949

Answers (4)

Ted Goas
Ted Goas

Reputation: 7587

You can use the HTML dir attribute to manipulate the layout despite what the source order of each column is.

If you layout the email how you want it to appear on mobile, you can then then change the desktop layout using the dir attribute. Using your code, here's an example of a two-column layout where the image will stack above the text on mobile, but appear in the right column on desktop:

<!-- dir=rtl is where the magic happens (rtl = right to left). This swaps the alignment on wide while maintaining stack order on narrow. -->

<table dir="rtl" border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>

        <!-- put this column first in the source order so the image stacks on top of the text on mobile -->
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent" dir="ltr">
                        <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
            </table>
        </td>

        <!-- put this column first in the source order so the image stacks on top of the text on mobile -->
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent" dir="ltr">
                        <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                        <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>
            </table>
        </td>

    </tr>
</table>

Using your existing media query to stack the columns should work wth this code.

Upvotes: 0

Syfer
Syfer

Reputation: 4479

This is what you are after. I have taken one table of yours and given an example of how column swapping can be done. You will need to keep both the elements together for it to work.

The method used here is called hybrid. Both columns are created using div's which is encased in a td

<td valign="top" bgcolor="#FFFFFF" class="templateColumnContainer" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px; direction:rtl;">

This td has direction which will tells everytrhing inside the div to be right to left (direction:rtl)

Next each columns are created using div's which are 50% width of the container td.

<div style="width:100%;max-width:280px;display: inline-block; vertical-align: top; direction:ltr;">
</div>

These div's have a max width of 280px, width of 100% and direction set to left to right (direction:ltr)

Everything inside the div can be coded as 100% width table.

I have added what people call ghost columns. This is Outlook conditional statement that tells outlook that this is a column.

 @media only screen and (max-width: 480px){
        #templateColumns{
            width:100% !important;
        }
    .templateColumnContainer{
        display:block !important;
        width:100% !important;
    }

    .columnImage{
        height:auto !important;
        max-width:480px !important;
        width:100% !important;
    }

    .leftColumnContent{
        font-size:16px !important;
        line-height:125% !important;
    }

    .rightColumnContent{
        font-size:16px !important;
        line-height:125% !important;
    }
    .hundred{width:100% !important;}
}
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td valign="top" bgcolor="#FFFFFF" class="templateColumnContainer" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px; direction:rtl;">

<div style="width:100%;max-width:280px;display: inline-block; vertical-align: top; direction:ltr;">       
             <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                         <p style ="font-size:21px; color:#009DE0; line-height: 22px;"> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>

            </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
</td><td width="50%" align="left" valign="top">
<![endif]-->

<div style="width:100%;max-width:280px; display: inline-block; vertical-align: top; direction:ltr;">       
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                     <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

            </table> 
            </div>
        </td>
    </tr>
</table>

For the second row of code you can swap the divs around to get the desired result.

Let me know if any of this didnt make sense or you want me to explain further.

Cheers

Upvotes: 0

karthick
karthick

Reputation: 12176

If you have the liberty of using nth-child then you can use 

.templateColumns:nth-child(2n) > tbody > tr > td:nth-child(1){
   float: right;
} 
.templateColumns:nth-child(2n) > tbody > tr > td:nth-child(2){
   float: left;
}

but you have to change the markup too, for push and pull to work you need to have the same type of content inside left column and right column.

I have added class .templateColumns to the table https://codepen.io/srajagop/pen/NjZVpo?editors=1100

Note: nth-child is not supported by all the email readers, gmail doesnt support it

Upvotes: 1

gwally
gwally

Reputation: 3547

What you need my son is direction in life.

You can apply the css property direction to swap the order of the table cells. Direction can be applied to text or inline-block elements.

You can apply it different ways.

<row dir="rtl">
<td dir="rtl">
.main-content {direction: rtl;  /* Right to Left */}

This is a sample of code how the row or td could be applied:

<!-- header -->
<container class="header">
  <row dir="rtl">
    <columns large="6" small="12" class="text-right" dir="rtl">
      <p class="text-right" style="color: #432a6f; font-size: 12px; text-decoration: underline;"><a href="<%@ include view='MirrorPageUrl' %>" target="_blank">View this email on the web</a></p>
    </columns>
    <columns large="6" small="12" dir="rtl">
      <a href="http://example.com" target="_blank"><img style="display: inline-block" border="0" alt="Image name" src="http://example.com/sample.png" width="184" height="45"></a>
    </columns>
  </row>
</container>
<!-- .header -->

You can try rtl ot ltr inherit from parent elements.

I would suggest placing direction on a class for the tables in a @media query so that you can swap them in mobile view. Something like this:

@media only screen and (max-width: 600px) {
  .leftColumnContent {direction: rtl}
}

For more information on direction, check out: https://css-tricks.com/almanac/properties/d/direction/

Good luck.

Upvotes: 2

Related Questions