# Text Color in Mobile Different

**URL:** <https://community.hubspot.com/t/text-color-in-mobile-different/86403>\
**Category:** CMS Development\
**Tags:** email, free, starter\
**Created:** [July 29, 2023, 2:01pm UTC](https://community.hubspot.com/t/text-color-in-mobile-different/86403 "2023-07-29T14:01:57Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![KMcArdle3](https://avatars.discourse-cdn.com/v4/letter/k/90ced4/32.png) [@KMcArdle3](https://community.hubspot.com/u/KMcArdle3)\
**Post date:** [July 29, 2023, 2:01pm UTC](https://community.hubspot.com/t/text-color-in-mobile-different/86403/1 "2023-07-29T14:01:57Z")

</div>

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”\>\&nbsp;\</td\>  
\</tr\>  
\<tr\>  
\<td width=“50” class=“h-space”\>\&nbsp;\</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”\>\&nbsp;\</td\>  
\</tr\>  
\<tr\>  
\<td colspan=“3” height=“20”\>\&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\>

Thank you in advance for your help!

---

<div class="post-metadata">

**Author:** ![himanshurauthan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/himanshurauthan/32/53076_2.png) [@himanshurauthan](https://community.hubspot.com/u/himanshurauthan)\
**Post date:** [July 31, 2023, 12:41pm UTC](https://community.hubspot.com/t/text-color-in-mobile-different/86403/2 "2023-07-31T12:41:58Z")

</div>

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:

```lia-code-sample
.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.