Text Color in Mobile Different

Develop, Build & Integrate CMS Development
, ,
1

Hello, I am a new HubSpot user. I accidentally stumbled upon the developer side and have limited experience. I am running into an issue with mobile text color.

On mobile, ‘banner_line_2’ and ‘banner_line_4’ are appearing blue, but appearing white on web and in inbox. Here is my source code:

{% unless accentColor %}{% set accentColor = “#ffffff” %}{% endunless %}
{% unless accentTextColor %}{% set accentTextColor = “#38484e” %}{% endunless %}
{% unless heroBackgroundColor %}{% set heroBackgroundColor = “#38484e” %}{% endunless %}

<table cellpadding=“0” cellspacing=“0” border=“0” style=“width: 100%; max-width: 1800px;”>
<tr>
<td background=“{{ widget.background_image.src }}” style=“background-size: cover; background-image: url(‘{{ widget.background_image.src }}’);” bgcolor=“#ffffff” valign=“top”>
<!--[if gte mso 9]>
<v:rect xmlns:v=“urn:schemas-microsoft-com:vml” fill=“true” stroke=“false” style=“width: 190px;”>
<v:fill type=“tile” src=“{{ widget.background_image.src }}” color=“#eeeeee” />
<v:textbox style=“mso-fit-shape-to-text:true” inset=“0,0,0,0”>
<![endif]-->
<div>
<table cellpadding=“0” cellspacing=“0” border=“0” style=“min-width: 100%; width: 100%;”>
<tr>
<td colspan=“3” height=“10”>\ </td>
</tr>
<tr>
<td width=“50” class=“h-space”>\ </td>
<td width=“300” style=“background-color: {{ accentTextColor }}; {% if sans_serif %}font-family: {{ sans_serif }};{% endif %}”>
<table width=“200” align=“center” style=“width: 100%”>
<tr>

<td style=“padding-bottom: 2px; padding-top: 20px; padding-left: 20px; padding-right: 20px;”>
<div style=“font-size:15px; line-height:2em; color: #D9EAD3; font-family: sans-serif; font-weight: bold;”>
{{ widget.banner_title|upper }}
</div>
</td>
</tr>
<tr>
<td style=“padding-bottom: 2px; padding-left: 20px; padding-right: 20px;”>
<div style=“font-size: 16px; font-weight: bold; font-family: sans-serif; color: #ffffff;”>
{{ widget.banner_line_2 }}
</div>
</td>
</tr>
<tr>
<td style=" padding-left: 20px; padding-right: 20px;“>
<div style=“font-size: 14px; line-height: 1.5em; color: #ffffff; font-family: sans-serif;”>
{{ widget.banner_line_3 }}
</div>
</td>
</tr>
<tr>
<td style=“padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px;”>
<div class=“pull-CTA-below-container” style=“font-size: 12px; line-height: 1.5em; color: #ffffff; font-family: sans-serif;”>
{{ widget.cta }}
</div>
</td>
</tr>
</div>
</td>
</tr>
<tr>
<td style=“padding-bottom: 2px; padding-left: 20px; padding-right: 20px;”>
<div style=“font-size: 16px; font-weight: bold; font-family: sans-serif; color: #ffffff;”>
{{ widget.banner_line_4 }}
</div>
</td>
</tr>
<tr>
<td style=” padding-left: 20px; padding-right: 20px;">
<div style=“font-size: 14px; line-height: 1.5em; color: #ffffff; font-family: sans-serif;”>
{{ widget.banner_line_5 }}
</div>
</td>
</tr>
<tr>
<td style=“padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px;”>
<div class=“pull-CTA-below-container” style=“font-size: 12px; line-height: 1.5em; color: #ffffff; font-family: sans-serif;”>
{{ widget.cta2 }}
</div>
</td>
</tr>
</table>
</td>
<td width=“auto” class=“h-space”>\ </td>
</tr>
<tr>
<td colspan=“3” height=“20”>\ </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”>\ </o:p></p>
</v:textbox>
</v:rect>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</td>
</tr>
</table>

Thank you in advance for your help!

2

Hello @KMcArdle3

The accentTextColor variable is set to #38484e, which is a dark blue color. On mobile devices, the text color is automatically adjusted to be more readable, so the banner_line_2 and banner_line_4 lines of text are being displayed in white.

To fix this, you can either change the value of the accentTextColor variable to a lighter color, or you can add the following CSS rule to your code:

.banner_line_2, .banner_line_4 {
 color: #ffffff;
}

This will override the automatic text color adjustment and force the banner_line_2 and banner_line_4 lines of text to be displayed in white, regardless of the device they’re being viewed on.