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
amwilie
Key Advisor | Elite Partner
Key Advisor | 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

Web Developer at Lynton

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton

 

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 


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

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


0 Upvotes