Support » Plugin: International Telephone Input for Contact Form 7 » Quick Fix: Wrong Position of Retina Flags (Mobile)

  • Resolved marcusasiabc

    (@marcusasiabc)


    Version: 1.5.5
    1) Locate the CSS file:
    WP_PLUGIN/international-telephone-input-for-contact-form-7/vendor/intl-tel-input/css/

    2) There are two, edit intlTelInput.css first, you will copy the finished code to minifier to produce the content, and replace the content in intlTelInput.min.css.

    3) in intlTelInput.css:
    Line 192: .iti-flag { background-size: 5630px 15px; } update to: .iti-flag { background-size: 5652px 15px; }

    Select from:
    Line 911 (coincidence?): .iti-flag.us { to Line 964: background-position: -5610px 0px; }
    Update to:

    .iti-flag.us {
    height: 11px;
    background-position: -5263px 0px; }
    .iti-flag.uy {
    height: 14px;
    background-position: -5285px 0px; }
    .iti-flag.uz {
    height: 10px;
    background-position: -5307px 0px; }
    .iti-flag.va {
    height: 15px;
    background-position: -5329px 0px; }
    .iti-flag.vc {
    height: 14px;
    background-position: -5346px 0px; }
    .iti-flag.ve {
    height: 14px;
    background-position: -5368px 0px; }
    .iti-flag.vg {
    height: 10px;
    background-position: -5390px 0px; }
    .iti-flag.vi {
    height: 14px;
    background-position: -5412px 0px; }
    .iti-flag.vn {
    height: 14px;
    background-position: -5434px 0px; }
    .iti-flag.vu {
    height: 12px;
    background-position: -5456px 0px; }
    .iti-flag.wf {
    height: 14px;
    background-position: -5478px 0px; }
    .iti-flag.ws {
    height: 10px;
    background-position: -5500px 0px; }
    .iti-flag.xk {
    height: 15px;
    background-position: -5522px 0px; }
    .iti-flag.ye {
    height: 14px;
    background-position: -5544px 0px; }
    .iti-flag.yt {
    height: 14px;
    background-position: -5566px 0px; }
    .iti-flag.za {
    height: 14px;
    background-position: -5588px 0px; }
    .iti-flag.zm {
    height: 14px;
    background-position: -5610px 0px; }
    .iti-flag.zw {
    height: 10px;
    background-position: -5632px 0px; }

    Copy Line 191 to 193, place it just above the line of .iti-flag { width: 20px; }

    Source and reference: https://github.com/jackocnr/intl-tel-input/blob/master/src/css/sprite.scss

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Yordan Soares

    (@yordansoares)

    Hello @marcusasiabc,

    I was busy with the WordCamp Spain that finished last Saturday. I’m just read your suggestion: thank you!

    I will test your code in the current version to biuld a maintenance release. By the way, I’m working in a major release to upgrade built-in library from v12.x to v17.x.

    Best regards,
    Yordan Soares

    Plugin Author Yordan Soares

    (@yordansoares)

    Hello again @marcusasiabc,

    I just launched the latest release of the plugin, can you update it and give me feedback about if the issue was fixed?

    Thank you in advance.

    Best regards,
    Yordan Soares.

    paulwlynch

    (@paulwlynch)

    Hi @yordansoares thanks for a great plugin. Really appreciate it.

    I too have experienced the same positioning issue with Retina flags, I updated the plugin today but am still seeing the same issue. Have cleared cache etc..

    Thanks!

    Paul

    Plugin Author Yordan Soares

    (@yordansoares)

    Hello @paulwlynch,

    I launched the latest release of the plugin last week. Did you already updated? It would be great if you could tell me if the problem with flags in your WordPress installation was corrected.

    Thanks in advance for your feedback!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Quick Fix: Wrong Position of Retina Flags (Mobile)’ is closed to new replies.