International Flags overlapping in phone number field

Any update on this?

Hi @tejas2306

I hope you are doing good today.

Could you remove this code from the site, so we could have a clear sky on mobile and desktop view? It seems the code does not allow to overwrite desktop fix.

Kind Regards,
Kris

Hi,
I deleted the php file (flags-temporary-fix) from the mu-plugins folder. Let me know if it works now. Thanks.

Hi @tejas2306,

Please try adding the following CSS at WP Dashboard >> Appearance >> Customize >> Additional CSS and check if that helps.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
.iti__flag {
    background-size: 5630px 15px;
}
}

Please let us know how that goes.

Kind Regards,
Nebu John

Hi @wpmudevsupport14 ,
I added the above code in custom css but it didn’t work. The flags still appear overlapping/misplaced on mobile. Please Check this link for the screenshot of the issue https://ibb.co/3pTd6wk

In case the link of the screenshot in the above reply doesn’t work here’s an alternate link https://pasteboard.co/853Ke6Vw8npp.jpg

Hi @tejas2306

I hope you are doing good today.

We visited your site and it seems the issue is gone now. Could you double-check on your side?

Kind Regards,
Kris

Hi @wpmudevsupport13
Unfortunately the issue still persists on mobile. However if you simulate a mobile view through wordpress customizer/page builder on desktop it appears alright but when you see it on an actual mobile device the flags on phone number field are messed up. Please refer to the screenshot links shared in the previous replies, those were taken on an android phone chrome browser.

Hi @tejas2306

Thank you for the update.

We double-checked this and the issue is only happening on some screen sizes, which we reported to our developers.

I am afraid we couldn’t find an easy CSS solution but we pinged the plugin developers to verify if we can give an estimated time to release a fixed version.

Best Regards
Patrick Freitas

Hi @wpmudevsupport12 ,
That’s sad to hear. Hope the next update solves this critical bug.
Is there anyway we can disable the flags and show only the ISD codes? A CSS fix for the same will be very helpful. Thanks.

Hi @tejas2306

Could you please try this CSS?

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
.iti__flag {
    background-size: 5630px 15px !important;
}
.iti__flag.iti__va {
    background-position: -5307px 0;
}
.iti__flag.iti__us {
    background-position: -5241px 0;
}
.iti__flag.iti__uy {
    background-position: -5263px 0;
}
.iti__flag.iti__uz {
    height: 10px;
    background-position: -5285px 0;
}
.iti__flag.iti__vu {
    height: 12px;
    background-position: -5434px 0;
}
.iti__flag.iti__ve {
    background-position: -5346px 0;
}
.iti__flag.iti__vn {
    background-position: -5412px 0;
}
.iti__flag.iti__wf {
    background-position: -5456px 0;
}
.iti__flag.iti__eh {
    background-position: -1489px 0;
}
.iti__flag.iti__eh {
    background-position: -1511px 0;
}
.iti__flag.iti__ye {
    background-position: -5522px 0;
}
.iti__flag.iti__zm {
    background-position: -5588px 0;
}
.iti__flag.iti__zw {
    background-position: -5610px 0;
}
}

This worked on a recent test.

Let us know if this works for you too.
Best Regards
Patrick Freitas

Hello @tejas2306 ,

We haven’t heard from you for several days now, so it looks like you don’t have more questions for us.

Feel free to re-open this ticket if needed.

Kind regards
Kasia