Email not displaying background colors in Gmail App

Product Support
1

Your software
My Mautic version is: 4.3.1
My PHP version is: 7.4
My Database type and version is: MariaDb 10.3

Your problem
My problem is: Email not display background colors in Gmail App. It display fine everywhere else (Gmail desktop, Apple mail, etc.)

These errors are showing in the log: None.

Steps I have tried to fix the problem: I have changed the code in both the mjml and html. The email display correctly in every other application but the Gmail app. I know that a large number of users utilize the gmail app.

2

That is specific to your design because its working fine by me. I cant reproduce the issue. Maybe insert the relevant code here?

3

Joey, thank you for the reply. The code is listed below. The background-color is not displaying. I tried changing background-color="#000000" to style="background-color:#000000" but the editor changes it back to the initial way.

<mjml>
	<mj-body background-color="#000000">
		<mj-section background-color="#111111" padding-bottom="0">
			<mj-column width="100%">
				<mj-image href="https://www.test.com" src="https://e.test.com/themes/hoah/assets/acft.png?vcb3d6295" alt="ACFT App logo" border="none" width="100px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"/>
			</mj-column>
		</mj-section>
		<mj-section background-color="#333333" padding-top="0">
			<mj-column width="100%" background-color="#111111">
				<mj-text font-size="32px" font-family="Arial Black, Gadget, sans-serif" color="white" padding-top="0" padding-left="10px" align="center">
					<p>Lets Get to Work!
					</p>
				</mj-text>
				<mj-image src="https://e.test.com/media/images/ag2ahesddnhafpo2norycmuxti.jpg" alt="Deadlift" border="none" width="600px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0" id="i4ko"/>
				<mj-text color="white" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" padding-bottom="0px" padding-top="20" font-size="20px" line-height="24px" container-background-color="#000000" __="1">
					<p>
						<strong>
							<span style="color:#eaeaea">The App was created
								<em>for you</em>&nbsp;by Warriors. &nbsp;Take a look below to find out where to start!</span>
						</strong>
					</p>
				</mj-text>
			</mj-column>
			<mj-section background-color="rgba(0,0,0,0)" __="1">
				<mj-column width="50%">
					<mj-text align="center" color="#eaeaea" font-family="Arial Black, Gadget, sans-serif" font-size="24px" padding-top="10" font-weight="bold" padding-bottom="0" line-height="28px">
						<p>  Fitness Plans
						</p>
					</mj-text>
					<mj-text color="#eaeaea" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="18px" padding-top="0" padding-bottom="0" line-height="24px">
						<p>
							<strong>Designed for you. &nbsp;Perfect fitness in&nbsp! &nbsp; equipment needed!</strong>
						</p>
					</mj-text>
				</mj-column>
				<mj-column width="50%">
					<mj-image src="https://e.test.com/media/images/img_3948.jpg" alt="Paprikas" border="none" width="290px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0" id="i1qog" border-radius="10px 10px 10px 10px"/>
				</mj-column>
			</mj-section>
			<mj-section border="3px dashed #ffd700">
				<mj-column width="50%">
					<mj-text align="center" color="#eaeaea" font-family="Arial Black, Gadget, sans-serif" font-size="24px" padding-top="10" font-weight="bold" padding-bottom="0" line-height="28px">
						<p>The Ultimate Stopwatch
						</p>
					</mj-text>
					<mj-text color="#eaeaea" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="18px" padding-top="0" padding-bottom="0" id="ixvkg" line-height="24px">
						<p>
							<strong>See your progess on any timed event.&nbsp;Are you close to maxing? Lagging behind? The Stopwatch will let you know!</strong>
						</p>
					</mj-text>
				</mj-column>
				<mj-column width="50%">
					<mj-image src="https://e.test.com/media/images/img_3952_2-1.jpg" alt="Paprikas" border="none" width="290px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0" border-radius="10px 10px 10px 10px" id="ihp1l"/>
				</mj-column>
			</mj-section>
			<mj-section border="0 none #000000" __="1">
				<mj-column width="50%" background-color="rgba(0,0,0,0)" __="1" border="0 none #000000">
					<mj-text align="center" color="#eaeaea" font-family="Arial Black, Gadget, sans-serif" font-size="24px" padding-top="10" font-weight="bold" padding-bottom="0" id="im9pj" line-height="28px">
						<p>Enhanced Scorechart
						</p>
					</mj-text>
					<mj-text color="#eaeaea" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="18px" padding-top="0" id="i8j8j" padding-bottom="0" line-height="24px">
						<p>
							<strong>Check out your standards.
							</strong>
							<strong>What's your max? &nbsp;At Test, we always shoot for the max. &nbsp;600 is no longer the standard.
								<span style="color:#ffd700">Xtended Scale coming soon!</span>
							</strong>
						</p>
					</mj-text>
				</mj-column>mj-column&gt;
				<mj-column width="50%" border="0 none #000000" __="1">
					<mj-image src="https://e.test.com/media/images/img_3947.jpg" alt="More Paprikas" border="none" width="290px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0" id="ia8wn" border-radius="10px 10px 10px 10px"/>
				</mj-column>
			</mj-section>
		</mj-section>
		<mj-section background-color="#111111" padding-top="0">
			<mj-column>
				<mj-social font-size="12px" icon-size="24px" border-radius="12px" mode="horizontal">
					<mj-social-element name="linkedin" href="https://www.linkedin.com/company/Test/"></mj-social-element>
					<mj-social-element name="facebook" href="https://www.facebook.com/Test"></mj-social-element>
					<mj-social-element name="twitter" font-size="20px" line-height="24px" href="https://twitter.com/Test"></mj-social-element>
					<mj-social-element name="youtube" font-size="20px" line-height="24px" href=""></mj-social-element>
				</mj-social>
			</mj-column>
			<mj-column>
				<mj-image src="https://e.test.com/media/images/gold_star_sm.png" id="irg8y" padding-bottom="0" padding-top="0"/>
			</mj-column>
			<mj-column>
				<mj-text color="white" align="center" padding-top="0" padding-bottom="0" font-size="14px" line-height="16px">
					<p>
						<a href="{unsubscribe_url}" style="text-decoration-color:#ffd700">
							<span style="color:#ffd700">Manage Email Preferences</span>
						</a>
					</p>
				</mj-text>
			</mj-column>
		</mj-section>
		<mj-section>
			<mj-column>
				<mj-text padding-top="0" padding-bottom="0" font-size="14px" line-height="16px" align="center">
					<p>
						<span style="color:#eaeaea">© 2022&nbsp;Test, LLC | 123 Test Lane</span>
					</p>
				</mj-text>
			</mj-column>
		</mj-section>
	</mj-body>
</mjml>
4

Hi,
for me it throws a bunch of errors:

Instead of using span, which is not an mjml element, try to color the mj-column or the mj-text itself.
You can use container-background-color in an mj-text element.

https://documentation.mjml.io/#mj-text

Joey

5

Thanks Joey, let me take a look. You are able to get dark backgrounds to display correctly in the gmail mobile app? That’s the only place where I’m experiencing this issue. It display correctly everywhere else.