Support » Plugin: Country & Phone Field Contact Form 7 » Flag shows over the country/phone text

  • Resolved dkdaye

    (@dkdaye)


    Hi and thanks for such a nice plugin. I installed it and it works very well but there must be a css conflict somewhere since in both the country and phone entries the flag displays over the text. I was trying to figure out if there was an easy place in the css files where I could increase the padding but nothing I changed altered the overwritten text display.

    Would you be able to point me to the line that I could increase the padding upon so the flag element area does not overwrite the country/phone text?

    Thank you so much!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Narinder Singh

    (@narinderbisht)

    Hi @dkdaye

    Thank you for using this plugin. Your theme conflicts with the input box paddings. I am sharing a CSS code for you. Kindly add this CSS code from WordPress customizer custom CSS.

    .intl-tel-input.allow-dropdown input, .intl-tel-input.allow-dropdown input[type=tel], .intl-tel-input.allow-dropdown input[type=text], .intl-tel-input.separate-dial-code input, .intl-tel-input.separate-dial-code input[type=tel], .intl-tel-input.separate-dial-code input[type=text] {
    padding-right: 6px !important;
    padding-left: 52px !important;
    margin-left: 0 !important;
    }

    .country-select.inside input, .country-select.inside input[type=text] {
    padding-right: 6px !important;
    padding-left: 52px !important;
    margin-left: 0 !important;
    }
    .country-select .selected-flag {
    padding: 0 0 0 8px;
    }

    I hope it will work for you. If you like the plugin, kindly share your reviews.

    Regards
    Narinder.

    How to change default country flag USA to INDIA

    Thanks for the CSS code, this helped me out! 🙂

    Best regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.