- Issue description:
Hello,
I noticed the following with the website translator:
Unfortunately, Elfsight’s widgets overlap, so in my case, the website translator doesn’t expand properly, and some languages cannot be selected.
The problem mainly affects mobile devices, although this overlap also occasionally occurs on tablets or computers (depending on the screen size or resolution).
Unfortunately, inserting CSS code from a similar forum post didn’t help.
Perhaps the code can be adjusted here so that the Website Translator has priority over the display?
Thanks in advance!
3 Likes
Hi @Gam
Have you tried solving this with the z-index?
Give it a try and let me know if it worked.
.global-styles,
[class*="eapps-website-translator"] [class*="Popout__PopoutContent-sc"] {
z-index:999!important;
}
3 Likes
Hello @Sina,
Thanks for your answer and the code.
I tried it, and unfortunately, it didn’t work. It’s still like the image above.
It also seems to only affect Elfsight elements (in my case event calendar and website translator).
For example, the website translator expands correctly over a video element (see image of homepage). This should also be the case with widgets.
2 Likes
Hi @Gam
You can give the affected Elfsight widget a z-index less than 999 (e.g., 10) as important. Give it a try.
The image above probably shows the event calendar?
3 Likes
Hi there, @Gam 
We’ve fixed the issue with this CSS code:
.global-styles,
[class*='jw-element']:has(.elfsight-app-d4a3d1cd-735d-45f6-9e7e-f83a4e573803) {
z-index: 2;
}
.global-styles,
[class*='jw-element']:has(.elfsight-app-9f347713-5d98-4179-8a4a-290390a48cc4) {
z-index: 1;
}
Please check it out and let me know if it’s fine now 
3 Likes
@Sina @Max
Thanks for your answers and your support.
The problem has now been resolved with the CSS code and the z-index.
A photo is attached which shows the final result.
Thanks again.
4 Likes
Awesome, you’re always welcome 
1 Like