Hi Ella, I see the issue now! Right now, all text elements using .fixed-text are getting the same styling, which is why both your white text on the fixed image and black text on the cream background are being affected together.
To solve this, you need separate CSS classes for each type of text so that they don’t all inherit the same color settings.
Solution: Use Different Classes for Each Text Type
Right now, everything labeled as .fixed-text is being turned white because your CSS applies a single rule to all instances. Instead, we will:
- Keep .fixed-text for white text on the fixed image.
- Create a new class (.black-text) for the text that needs to stay black on the cream background.
<style>
/* Default Styles */
.fixed-text {
color: #FFFFFF !important; /* Ensures white text */
font-family: Helvetica, Arial, sans-serif !important;
}
.black-text {
color: #000000 !important; /* Ensures black text */
font-family: Helvetica, Arial, sans-serif !important;
}
/* Background Styling */
.fixed-bg {
background-color: #000000 !important; /* Locks dark background */
}
/* Dark Mode Styling */
@media (prefers-color-scheme: dark) {
.fixed-text {
color: #FFFFFF !important; /* Forces white text in dark mode */
}
.black-text {
color: #000000 !important; /* Ensures black text remains black */
}
.fixed-bg {
background-color: #000000 !important; /* Prevents background inversion */
}
}
/* Gmail & Outlook Fixes */
[data-ogsc] .fixed-text, [data-ogsb] .fixed-text {
color: #FFFFFF !important; /* Gmail/Outlook Dark Mode Fix */
}
[data-ogsc] .black-text, [data-ogsb] .black-text {
color: #000000 !important; /* Ensures black text stays black */
}
</style>
Updated HTML:
Now, apply these classes separately to the different sections:
<div class="fixed-bg">
<!-- This text should always be white -->
<h3 style="text-align: center;">
<span class="fixed-text" style="font-size: 18px;">
<strong>Welcome to Samiya Skincare</strong>
</span>
</h3>
<!-- This text should also be white -->
<p style="text-align: center;">
<span class="fixed-text" style="font-size: 16px;">
Hi, {{ first_name|default:"there" }}. We’re so glad you’re here!
</span>
</p>
</div>
<!-- This section should remain black on a cream background -->
<div style="background-color: #F3F0E9; padding: 20px;">
<p style="text-align: center;">
<span class="black-text" style="font-size: 16px;">
Rooted in the rich traditions of India, we create high-vibrational skincare.
</span>
</p>
</div>
<!-- This should remain black -->
<p style="text-align: center;">
<span class="black-text" style="font-size: 16px;">
Follow us on Instagram!
</span>
</p>
I know this is a lot of code so if you have nay additional questions please let me know so we can get this fixed and working!