Trouble Combining Two Custom Modules in HubSpot Email Templates

[talfaropro]

Hi everyone,

I'm having trouble combining two custom modules that I built for an email template in HubSpot. Each module works fine on its own, but when I try to merge them, the layout gets messed up.

I suspect the issue might be related to the <style> tags inside the HTML code, since CSS isn't allowed in email modules. However, I’m not entirely sure if that's the root cause or if something else is interfering with the rendering.

I've attached screenshots to show how the modules look separately vs. how they appear when combined. Any insights or suggestions on how to properly merge these without breaking the layout would be greatly appreciated!

Thanks in advance!

Custom Module 1Custom Module 2Combine Modules (broken)Custom Module 1 HTML code

[Jaycee_Lewis]

Hey, @talfaropro 👋 Can you add your code example directly into the post body? There is a code block tool in the editor.

 

It's challenging to troubleshoot code from only a screenshot (you didn't do anything wrong, I want to give our community members more to work with)

Thanks! — Jaycee

[talfaropro]

of course! Thank you.

Custom Module #1

<div class="property-card">
  <img src="{{ module.property_image.src }}" alt="Property Image" class="property-image">
  
  <div class="property-details">
    <h2 class="tenant-name">{{ module.tenant_name }}</h2>
    <p class="city-state">{{ module.city_state }}</p>
    <div class="property-info">
      <p><strong>Purchase Price:</strong> {{ module.purchase_price }}</p>
      <p><strong>Cap Rate:</strong> {{ module.cap_rate }}</p>
      <p><strong>Rent:</strong> {{ module.rent }}</p>
    </div>
    <a href="{{ module.listing_link }}" class="view-listing">View Listing</a>
  </div>
</div>
<style>
  .property-card {
  display: flex;
  align-items: center;
  background: #f4f4f4;
  border-radius: 8px;
  padding: 15px;
  max-width: 650px;
  margin: auto;
  font-family: Tahoma, sans-serif;
  height: 140px; /* Matches the image height */
}

.property-image {
  width: 220px;
  height: 140px;
  object-fit: cover;
  border-radius: 5px;
}

.property-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 140px;
  padding-left: 15px;
  max-width: 220px; /* Prevents text from extending beyond the image width */
}

.tenant-name {
  font-size: 16px;
  font-weight: bold;
  color: #003c4c;
  margin-bottom: 0px;
  line-height: 1; /* Reduces vertical spacing */
}

.city-state {
  font-size: 13px;
  color: #666;
  margin-top: -3px; /* Pulls City, State even closer to Tenant */
}

.property-info {
  font-size: 13px;
  color: #000;
  line-height: 1.5;
}

.property-info p {
  margin: 4px 0; /* Keeps spacing consistent */
}

.view-listing {
  font-size: 12px;
  font-weight: bold;
  color: #0073e6;
  text-decoration: none;
  margin-top: 5px; 
  align-self: flex-start; /* Ensures it stays within the text box */
}

@media (max-width: 600px) {
  .property-card {
    flex-direction: column;
    text-align: center;
    height: auto;
  }

  .property-image {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .property-details {
    height: auto;
    text-align: center;
    max-width: 100%; /* Reset width for mobile */
  }
}</style>

Custom Module #2

<div class="property-card">
  <img src="{{ module.property_image.src | default('https://via.placeholder.com/280x292?text=No+Image') }}" 
       alt="Property Image" class="property-image">
  <h2 class="tenant-name">{{ module.tenant_name }}</h2>
  <p class="city-state">{{ module.city_state }}</p>
  <div class="property-info">
    <p><strong>Purchase Price:</strong> {{ module.purchase_price }}</p>
    <p><strong>Cap Rate:</strong> {{ module.cap_rate }}</p>
    <p><strong>Rent:</strong> {{ module.rent }}</p>
  </div>
  <a href="{{ module.listing_link }}" class="view-listing">View Listing</a>
</div>
<style>
  .property-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns text to the left */
    border-radius: 8px;
    padding: 10px;
    text-align: left; /* Ensures all text is left-aligned */
    max-width: 280px;
    font-family: Tahoma, sans-serif;
    background: transparent; /* Removes any background */
  }

  .property-image {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 5px;
  }

  .tenant-name {
    font-size: 16px;
    font-weight: bold;
    color: #003c4c;
    margin-bottom: 0px;
  }

  .city-state {
    font-size: 13px;
    color: #666;
    margin-top: -3px;
    margin-bottom: 8px;
  }

  .property-info {
    font-size: 13px;
    color: #000;
    line-height: 1.3;
  }

  .property-info p {
    margin: 3px 0;
  }

  .view-listing {
    font-size: 12px;
    font-weight: bold;
    color: #0073e6;
    text-decoration: none;
    display: block;
    margin-top: 5px;
  }
</style>

[Anton · Accepted solution]

Hi @talfaropro, 

I see a few potential issues. 

1. Most EMail clients won't render <style>-tags outside of the <head>-tag. Therefore it's still best-practise to use inline-styling
2. Best practise for layouts is - unfortunately - still tables instead of <divs>
3. The majority of clients have problems with flex-box. 

My recommendation is to create your desired layout the dnd editor, (send your self a test mail), preview the web-version, inspect the source-code, grab the layout with the hs- classes, paste it into your custom module and go from there. 

If you're looking for "pixel perfect" solutions, I'm recommending to use html-email-templates instead of dnd emails.

To have good (and responsive) template, I recommend to use mjml.io. Once your template is build, you can change the static image/text info to HubSpot modules to have the option to change the content.

best, 

Anton

[talfaropro]

Thanks Anton - to be honest, I am not a coder at all, and used CHATGPT to help me build these modules. What would you recommend moving forward? Using MJML for it?