Responsive two column e-mail module

[Babis_Mate]

Hello,

I want to create a module wtih two culumns for e-mails. Each column should have:
Image
Text
CTA

with a small padding between them (15 px). The issue is that I can't make it responsive. We want the 2 columns to stack on mobile, and also become full-width ones. 

That is how they look on desktop

but that is how they look on mobile

I tried to add  .td { display: block; width: 100%} in a style in the module but it didn't work.

The solution to create a fully custom template does not work for this use, because we want the template to be scalable. We need this module to be applied to a wide range of e-mails.

PS: I tried to add the "default" classes that work for the other components
hse-column-container
hse-column hse-size-6

but without success

Does anyone have a solution for that?

[amwilie]

@Babis_Mate 
Belive what you're missing is hs_padded. It takes any left/right padding and removes it on mobile.

Here's a skeleton using what I've put together for creating two column modules for DnD email. Hope this helps.

<!--[if (mso)|(IE)]>
  <table align="center" style="width:600px;" cellpadding="0" cellspacing="0" role="presentation" width="600">
  <tr>
<![endif]-->

  {# ---- COLUMN ONE ---- #}
  <!--[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-right: 20px;">
            <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
             <tbody>
              <tr>
                <td style="background-color: yellow; padding: 20px;">
                  YOUR CONTENT
                </td>
               </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!--[if gte mso 9]>
    </table>
  <![endif]-->
  <!--[if (mso)|(IE)]>
    </td>
  <![endif]-->

  {# ---- COLUMN 2 ---- #}
  <!--[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-left: 20px;">
            <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
             <tbody>
              <tr>
                <td style="background-color: red; padding: 20px;">
                  YOUR CONTENT
                </td>
               </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!--[if gte mso 9]>
    </table>
  <![endif]-->
  <!--[if (mso)|(IE)]>
    </td>
  <![endif]-->

<!--[if (mso)|(IE)]>
  </tr>
  </table>
<![endif]-->

[Babis_Mate]

Thank you very much! 

That solves the responsiveness issue, but it is still displayed with some padding on mobile.. here is the code I used so far:
I tried to make it full width on mobile but it didn't work..

<!--[if (mso)|(IE)]>
  <table align="center" style="width:620px;" cellpadding="0" cellspacing="0" role="presentation" width="610">
  <tr>
<![endif]-->

  {# ---- COLUMN ONE ---- #}
  <!--[if (mso)|(IE)]>
    <td valign="top" style="width:310px;">
  <![endif]-->

  <!--[if gte mso 9]>
    <table role="presentation" width="310" cellpadding="0" cellspacing="0" style="width:300px">
  <![endif]-->

  <div class="hse-column hse-size-6" style="width: 100%; padding: 0">
    <table role="presentation" cellpadding="0" cellspacing="5" width="100%">
      <tbody>
        <tr style="padding-bottom: 10px">
          <td class="hs_padded" style="padding-right: 10px">
            <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
             <tbody>
              <tr>
                <td style="background-color: #eaeff2; width: 100%">
                {% if module.image_field.src %}
	{% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}"' %}
	{% if module.image_field.size_type == 'auto' %}
		{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
	{% elif module.image_field.size_type == 'auto_custom_max' %}
		{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image_field.max_width }}px; max-height: {{ module.image_field.max_height }}px"' %}
	{% endif %}
	 {% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}
	<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
                </td>
               </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td class="hs_padded" style="padding-right: 10px; padding-bottom: 10px">
            <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
             <tbody>
                <tr>
                <td style="background-color: white; width: 100%; padding: 15px">
                  {% inline_rich_text field="richtext_field" value="{{ module.richtext_field }}" %}
                </td>
               </tr>
                <tr>
                <td style="background-color: white; width: 100%; padding-bottom: 10px">
                  <center>{% cta guid="{{ module.cta_field }}" %}</center>
                </td>
               </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!--[if gte mso 9]>
    </table>
  <![endif]-->
  <!--[if (mso)|(IE)]>
    </td>
  <![endif]-->

  {# ---- COLUMN 2 ---- #}
  <!--[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" style="width: 100% padding: 0">
    <table role="presentation" cellpadding="0" cellspacing="5" width="100%">
       <tbody>
        <tr style="padding-bottom: 10px">
          <td class="hs_padded" style="padding-left: 10px">
            <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
             <tbody>
              <tr>
                <td style="background-color: #eaeff2; width: 100%">
                {% if module.image_field_1.src %}
	{% set sizeAttrs = 'width="{{ module.image_field_1.width }}" height="{{ module.image_field_1.height }}"' %}
	{% if module.image_field_1.size_type == 'auto' %}
		{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
	{% elif module.image_field_1.size_type == 'auto_custom_max' %}
		{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image_field_1.max_width }}px; max-height: {{ module.image_field_1.max_height }}px"' %}
	{% endif %}
	 {% set loadingAttr = module.image_field_1.loading != 'disabled' ? 'loading="{{ module.image_field_1.loading }}"' : '' %}
	<img src="{{ module.image_field_1.src }}" alt="{{ module.image_field_1.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
                </td>
               </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td class="hs_padded" style="padding-left: 10px; padding-bottom: 10px">
            <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
             <tbody>
                <tr>
                <td style="background-color: white; width: 100%; padding: 15px">
                 {% inline_rich_text field="richtext_field_1" value="{{ module.richtext_field_1 }}" %}
                </td>
               </tr>
                <tr>
                <td style="background-color: white; width: 100%; padding-bottom: 10px">
                  <center>{% cta guid="{{ module.cta_field_1 }}" %}</center>
                </td>
               </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--[if gte mso 9]>
    </table>
  <![endif]-->
  <!--[if (mso)|(IE)]>
    </td>
  <![endif]-->

<!--[if (mso)|(IE)]>
  </tr>
  </table>
<![endif]-->

[sharonlicari]

Hi @Babis_Mate 

Thank you for the information provided. 

I think this article from our developer resources could be a good point to start. 

If this doesn't work, could you please share the code you are using?

Thanks

Sharon