Hi,
I'm using WpDiscuz in my website.
While on the desktop version, everything is working as it should. But when I use it on mobile, some components appear "transparent". What appears in the background is the "featured image" of the article, instead of white colour as intended (and as it appears on desktop).
It's still usable, but I think it looks weird. I want to know if anyone could tell me what's happening, and if it could be fixed. My mobile testing platforms have been an iPad Air2 with Safari, and a Moto G4Plus Android phone with Chrome.
Other than disable font-awesome (since I load it globally elsewhere), using a Spanish translation, and having specified a different font in the custom CSS, I haven't changed anything.
I'm attaching screenshots of what I see in: https://www.alpharamirez.com/es/korea-du-north-primera-parte/
Thanks a lot in advance!
Hi @airdres,
Please navigate to Dashboard > Comments > Settings > Styling admin page, put the following CSS code in "Custom CSS Code" textarea. Delete all caches and check again.
#wpcomm {
background: #fff !important;
}
Thanks for the quick answer!
That fixed about 80% of the problem indeed.
There are still two parts that show the transparency in mobile.
The first one is in the beginning of the comments section, where it says "Escribe un comentario".
The second one is in the bottom space between the end of the comments section, and the beginning of the grey footer that says "Ramirográfico".
I'm attaching other two screenshots.
Perhaps I need to add some extra code to the custom CSS? (I just don't know what).
Thanks again!
Hi @airdres,
Please remove the code I've bovided and put the following one:
#wpcomm {
margin-top: 0 !important;
background: #fff !important;
}
#wc-comment-header{
background: #fff;
}
Don't forget to delete all caches before checking.
That fixed it even better.
I still have the little bottom transparency, but it's really small and may not even be related to WpDiscuz (I'm looking at my footer margin CSS).
Again, thanks a lot!