# Custom Email Module with 2 Column Repeater

**URL:** <https://community.hubspot.com/t/custom-email-module-with-2-column-repeater/41995>\
**Category:** CMS Development\
**Created:** [August 8, 2021, 10:40pm UTC](https://community.hubspot.com/t/custom-email-module-with-2-column-repeater/41995 "2021-08-08T22:40:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![SStrachan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sstrachan/32/99678_2.png) [@SStrachan](https://community.hubspot.com/u/SStrachan)\
**Post date:** [August 8, 2021, 10:40pm UTC](https://community.hubspot.com/t/custom-email-module-with-2-column-repeater/41995/1 "2021-08-08T22:40:06Z")

</div>

I am trying to create a custom email module that will output 2 columns.

If there are more than 2 items in my repeater, the items show in a single row. [(See Here)](https://www.evernote.com/l/ALFLe_dE3NhOZarcny2KpbEqA9HqFUsEE3w) Any ideas how to achive this for a responsive email? CSS float is not supported in outlook email so cant use it.

My current code looks like:

```lia-code-sample
<div class="hse-column-container">
{% for item in module.yacht_photos %}	
<!--[if (mso)|(IE)]>
 <table align="center" style="width:600px;" cellpadding="0" cellspacing="0" role="presentation" width="600">
 <tr>
<![endif]-->
 {# ---- COLUMN ---- #}
 <!--[if (mso)|(IE)]>
 <td valign="top" style="width:300px;">
 <![endif]-->
 <!--[if gte mso 9]>
 <table role="presentation" width="300" cellpadding="0" cellspacing="0" style="width:300px">
 <![endif]-->
 <div class="hse-column hse-size-6">
 <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
 <tbody>
 <tr>
 <td class="hs_padded" style="padding: 5px 5px 5px 5px;">
 <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
 <tbody>
 <tr>
 <td style="background-color:#00204e; padding: 10px 10px;text-align:center;">
 <a href="mailto:{{ item.broker.columns.email }}" style="color:#fff;text-decoration:none;">
 <img src="{{ item.columns.hero_photo.url }}" style="width:100%;">
 </a>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <!--[if gte mso 9]>
 </table>
 <![endif]-->
 <!--[if (mso)|(IE)]>
 </td>
 <![endif]-->
{% endfor %}
</div>

```

---

<div class="post-metadata">

**Author:** ![miljkovicmisa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miljkovicmisa/32/86357_2.png) [@miljkovicmisa](https://community.hubspot.com/u/miljkovicmisa)\
**Post date:** [August 9, 2021, 8:39am UTC](https://community.hubspot.com/t/custom-email-module-with-2-column-repeater/41995/2 "2021-08-09T08:39:04Z")

</div>

Hello @SStrachan and welcome to the forum.  
First things first, you should do the iteration inside the \<tbody\> tag so you could control the number of rows/column you produce, right now what happens according to the code is that you are creating, so you will end up with a code for the module that looks like below:

```lia-code-sample
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
 <tr>
 {% for item in module.yacht_photos %}
 <td align="center" valign="top" width="50%" class="templateColumnContainer">
 <table border="0" cellpadding="10" cellspacing="0" width="100%">
 <tr>
 <td class="rightColumnContent">
 <a href="mailto:{{ item.broker.columns.email }}" style="color:#fff;text-decoration:none;">
 <img src="{{ item.columns.hero_photo.url }}" width="280" style="max-width:280px;" class="columnImage">
 </a>
 </td>
 </tr>
 </table>
 </td>
 {% endfor %}
 </tr>
</table>

```

And then inside your email template in the style tag put the following css:

```lia-code-sample
 /*<![CDATA[*/
 /* everything in this style tag will be inlined onto matching elements */
 @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;
 }
 }
 /*]]>*/

```

This should create the responsive email.  
_**Note: I’m using heavily mailchimp’s reccommendation on this topic as I aknowledge them as masters of email technology 😛 you can [find more info in this link](https://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/)  
If my answer was helpful please mark it as a solution**_

---

<div class="post-metadata">

**Author:** ![SStrachan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sstrachan/32/99678_2.png) [@SStrachan](https://community.hubspot.com/u/SStrachan)\
**Post date:** [August 9, 2021, 3:40pm UTC](https://community.hubspot.com/t/custom-email-module-with-2-column-repeater/41995/3 "2021-08-09T15:40:49Z")

</div>

@miljkovicmisa They are still showing all in one line. [See Here](https://www.evernote.com/l/ALHzmGNbgQJFo74tlM-DzNxcxM6X2HDe31k)

---

<div class="post-metadata">

**Author:** ![miljkovicmisa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miljkovicmisa/32/86357_2.png) [@miljkovicmisa](https://community.hubspot.com/u/miljkovicmisa)\
**Post date:** [August 9, 2021, 4:19pm UTC](https://community.hubspot.com/t/custom-email-module-with-2-column-repeater/41995/4 "2021-08-09T16:19:24Z")

</div>

Hey there @SStrachan, I probably don’t get what you need to accomplish, your screenshot shows three items in a row, and you mention you need the items in one row, this is quite the result I’m getting. can you share a picture with three or more items with the result you need on desktop and on mobile?

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [August 9, 2021, 1:52pm UTC](https://community.hubspot.com/t/custom-email-module-with-2-column-repeater/41995/5 "2021-08-09T13:52:55Z")

</div>

Hi @SStrachan ,  
Yes repeater is not working in email templates. You just need drag same email temlapte or set default template for second 2 column.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.  
Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![SStrachan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sstrachan/32/99678_2.png) [@SStrachan](https://community.hubspot.com/u/SStrachan)\
**Post date:** [August 9, 2021, 3:42pm UTC](https://community.hubspot.com/t/custom-email-module-with-2-column-repeater/41995/6 "2021-08-09T15:42:05Z")

</div>

[@webdew](https://community.hubspot.com/t5/user/viewprofilepage/user-id/131510) What do you mean the repeater is not working in email templates? The repeater is working for me, I am just having trouble with the html wrapping the items to be 2 columns.

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [August 13, 2021, 3:03pm UTC](https://community.hubspot.com/t/custom-email-module-with-2-column-repeater/41995/7 "2021-08-13T15:03:50Z")

</div>

@SStrachan Not sure have your fields set up but you’ll want Yacht Photos as a group repeater and then Columns as a group repeater with hero photo and broker email inside the column repeater. Like so:

 ![2columnrows.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/8/484a2ac3417b7df4b65281073c608ddc7cb581ca.png)

Then in your code you’ll have a for loop for the rows (place the hse-column-container inside this for loop as well) and a for loop for the columns. Also, put a width on your images else they’ll oveflow the body if they’re too big.

```lia-code-sample
{% for item in module.yacht_photos %}	
<div class="hse-column-container">
<!--[if (mso)|(IE)]>
 <table align="center" style="width:600px;" cellpadding="0" cellspacing="0" role="presentation" width="600">
 <tr>
<![endif]-->
 {% for col in item.columns %}
 {# ---- COLUMN ---- #}
 <!--[if (mso)|(IE)]>
 <td valign="top" style="width:300px;">
 <![endif]-->
 <!--[if gte mso 9]>
 <table role="presentation" width="300" cellpadding="0" cellspacing="0" style="width:300px">
 <![endif]-->
 <div class="hse-column hse-size-6">
 <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
 <tbody>
 <tr>
 <td class="hs_padded" style="padding: 5px 5px 5px 5px;">
 <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
 <tbody>
 <tr>
 <td style="background-color:#00204e; padding: 10px 10px;text-align:center;">
 <a href="mailto:{{ col.broker_email }}" style="color:#fff;text-decoration:none;">
 <img src="{{ col.hero_photo.src }}" width="250">
 </a>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <!--[if gte mso 9]>
 </table>
 <![endif]-->
 <!--[if (mso)|(IE)]>
 </td>
 <![endif]-->
 {% endfor %}
 <!--[if gte mso 9]>
 </tr></table>
 <![endif]-->
</div>
{% endfor %}

```