CMS Development

Babis_Mate
Contributor

Responsive two column e-mail module

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

Babis_Mate_0-1611755695624.png

but that is how they look on mobile

Babis_Mate_1-1611755760890.png

 

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?

0 Upvotes
3 Replies 3
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Responsive two column e-mail module

@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]-->

 

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
Babis_Mate
Contributor

Responsive two column e-mail module

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]-->




0 Upvotes
sharonlicari
Community Manager
Community Manager

Responsive two column e-mail module

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 


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes