Block with overlapping element is not properly displayed in dark mode
-
Block with overlapping element is not properly displayed in dark mode `I used the twenty twenty-one pattern “overlapping images and text” for the above mentioned page.
The text block overlaps the images and therefore requires a background color in this case the same color as the theme color (set in the customizer > Colors and Dark Mode).
In dark mode:
a) non-AMP page: The text element does not change at all to dark mode.
b) AMP page: The letters of the text element change to white what is the expected and wanted behaviour, but the background still does not change to the dark color as the rest of the page.
I assume that this can be fixed with css but so far, I could not figure out what does the trick.
Thanks for looking into this.
The page I need help with: [log in to see the link]
-
Hello @ingereck
Thank you for the support topic, As we checked your non-AMP and AMP page.
you are using custom color from the palette, which makes it a fixed background color.instead, I will recommend adding a custom class and style for it.
Add this CSS in Dashboard->Apparance->Customize->Additonal CSS
.custom-green-background { background-color: var(--global--color-background); }Clear your green background for column (screenshot )
Add your custom class for column block (screenshot)
This should resolve your issue.
Hope this helps!
- The topic ‘Block with overlapping element is not properly displayed in dark mode’ is closed to new replies.
