Adjusting height of custom module

[MSchaupp5]

Hi,

I was wondering if anyone could help. I'm fairly new to hubspot and don't know anything about code. I downloaded this custom module that comes with the Ridge email template. It’s a hero banner for marketing emails. I would really like to adjust the height of the banner, within the code, and for the life of me I can’t figure out how to do it?

Apologies if this is the wrong place to post this question and many thanks

<table cellpadding="0" cellspacing="0" border="0" style="min-width: 100%; width: 100%;">
<tr>
<td style="background-color: {{ module.bg_color.grad_color_1.color }}; background: linear-gradient(135deg, {{ module.bg_color.grad_color_1.color }} 0%,{{ module.bg_color.grad_color_2.color }} 100%); background-size: cover;{% if module.background_image %} background-image: url('{{ module.background_image.src }}');{% endif %}" bgcolor="{{ heroBackgroundColor }}" {% if module.background_image %}background="{{ module.background_image.src }}"{% endif %} valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px;">
<v:fill type="tile" src="{{ module.background_image.src }}" color="#eeeeee" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table width="600" style="min-width: 100%; width: 100%;">
<tr>
<td colspan="3" height="10"></td>
</tr>
<tr>
<td width="{{ module.logo.width }}" style="padding-left: 15px;">
{% if module.logo.src %}
<img src="{{ module.logo.src }}" width="{{ module.logo.width }}" height="{{ module.logo.height }}" alt="{{ module.logo.alt }}">
{% endif %}
</td>
<td width="auto">&nbsp;</td>
</tr>
<tr>
<td colspan="3" height="50">&nbsp;</td>
</tr>
<tr>
<td colspan="3" valign="middle" align="center" style="font-family: Georgia, Palatino, Times New Roman, Courier, serif; font-weight: 900; font-size: 30px; color: #ffffff;">{{ module.heading }}</td>
</tr>
<tr>
<td colspan="3" height="15" style="font-size: 0px;"></td>
</tr>
<tr>
<td colspan="3" valign="middle" align="center" style="font-family: Helvetica, Arial, Verdana, Trebuchet MS, sans-serif; text-align: center; font-weight: 900; font-size: 14px; color: #ffffff;">{{ module.subheading }}</td>
</tr>
<tr>
<td colspan="3" height="20" style="font-size: 0px;"></td>
</tr>
<tr>
<td colspan="3" valign="middle" align="center" style="text-align: center; font-size: 14px; color: #ffffff;">{{ module.cta }}</td>
</tr>
<tr>
<td colspan="3" height="50">&nbsp;</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>
</v:textbox>
</v:rect>

<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>

<![endif]-->
</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" style="min-width: 100%; width: 100%;">
<tr>
<td style="background-color: {{ module.bg_color.grad_color_1.color }}; background: linear-gradient(135deg, {{ module.bg_color.grad_color_1.color }} 0%,{{ module.bg_color.grad_color_2.color }} 100%); background-size: cover;{% if module.background_image %} background-image: url('{{ module.background_image.src }}');{% endif %}" bgcolor="{{ heroBackgroundColor }}" {% if module.background_image %}background="{{ module.background_image.src }}"{% endif %} valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px;">
<v:fill type="tile" src="{{ module.background_image.src }}" color="#eeeeee" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table width="600" style="min-width: 100%; width: 100%;">
<tr>
<td colspan="3" height="10"></td>
</tr>
<tr>
<td width="{{ module.logo.width }}" style="padding-left: 15px;">
{% if module.logo.src %}
<img src="{{ module.logo.src }}" width="{{ module.logo.width }}" height="{{ module.logo.height }}" alt="{{ module.logo.alt }}">
{% endif %}
</td>
<td width="auto">&nbsp;</td>
</tr>
<tr>
<td colspan="3" height="50">&nbsp;</td>
</tr>
<tr>
<td colspan="3" valign="middle" align="center" style="font-family: Georgia, Palatino, Times New Roman, Courier, serif; font-weight: 900; font-size: 30px; color: #ffffff;">{{ module.heading }}</td>
</tr>
<tr>
<td colspan="3" height="15" style="font-size: 0px;"></td>
</tr>
<tr>
<td colspan="3" valign="middle" align="center" style="font-family: Helvetica, Arial, Verdana, Trebuchet MS, sans-serif; text-align: center; font-weight: 900; font-size: 14px; color: #ffffff;">{{ module.subheading }}</td>
</tr>
<tr>
<td colspan="3" height="20" style="font-size: 0px;"></td>
</tr>
<tr>
<td colspan="3" valign="middle" align="center" style="text-align: center; font-size: 14px; color: #ffffff;">{{ module.cta }}</td>
</tr>
<tr>
<td colspan="3" height="50">&nbsp;</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>
</v:textbox>
</v:rect>

<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>

<![endif]-->
</td>
</tr>
</table>

[albertsg · Accepted solution]

Hi @MSchaupp5, since I don't know where and how this is used, I cannot tell you exactly what to change.

But if you want to change the height of elements, you have three options (and you need to know some basic CSS and HTML in both):

1) Update HTML tags with a height attribute, something like this:

<div height="300"></div>

2) Update HTML tags with style attribute and set there the element height using CSS, something like this:

<div style="height: 300px"></div>

3) Create a CSS file with the desired styles and include it into your HTML, something like this:

//CSS file

.myDiv {
    height: 500px;
}

<!-- HTML file -->
<head>
    <link rel="stylesheet" href="mystyle.css">
</head>

<body>
    <div class="myDiv"></div>
</body>

If you are not familiar with code, I would go with option 1 or 2, but for more updates and consistency across pages/elements, I would go with option 3.

Hope this helps!

[pauledwards]

My goodness, anything with code seems to be scary. I work for a HubSpot partner and we work great with this kind of stuff.

Do you still have this problem?