Problem with the script for selecting a country code in the mobile version

Design help Custom code
1

Hello everyone)

I used a ready-made script to select a country code for all forms of communication on the site. Everything works, but for some reason in the mobile version, when I look at it from a smartphone, in the dropdown the list of countries is displayed in white on a white background and nothing is visible…

This problem was initially on all versions, but I added the entire Form to the Typography color to dark and it helped) I also check the mobile version on a laptop and it works.

But it doesn’t work on smartphones ((( All the same in the dropdown it is white on white and I can’t influence it ((
Please tell me what could be the reason and is there any way to fix it?

Here is my site Read-Only: Webflow - Moon Karaoke
(how to share your site Read-Only link)

2

Hi Nuta,

You’re using a lib called IntlTelInput which is detecting your mobile device, and styling it differently in some way. I haven’t investigated what exactly it’s doing differently, but there is an iti-mobile class added.

I’d check the library to see if there are styling configs or options to apply, but if you cannot find any, an easy hack is just to force the styling of the classes the lib generates.

You can do that by dropping an Embed element on your page as follows. Note I’ve increased the font size slightly, it’s too small in the popup on my phone. You may wish to play with margins also.

<style>
    .iti__country {
        color: black !important;
        font-size: 1.2rem;
    }
</style>
3

Oh, it worked! Thank you very much!!! :blush:

1 Like