thiruc

Hi Patrick,

Thanks for looking into this over the weekend too. ??
I have tried the suggestion, though not sure why your above example states page-id-6132, as my form id was 6131 and is not related to the page-id.

I ended with this code, both combined and ultimately like below; though it had no effect on the mobile rendering.

@media only screen and (max-width: 768px) {
  .page-id-6131 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-6131 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
	.page-id-6131 .intl-tel-input .country-list .country .dial-code {
    color: #BFBFBF !important;
}
}

I therefore also tried the following – (this one I rolled back now as it also did not work)

@media only screen and (max-width: 768px) {
  #forminator-module-6131 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  #forminator-module-6131 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
	#forminator-module-6131 .intl-tel-input .country-list .country .dial-code {
    color: #BFBFBF !important;
}
}

Any further thoughts?

Thanks,

Thiru

Hi Nithin / team,

In fact I expect that you got the behaviour in the previous message as the page is live and I needed it to be legible so had tested to the same.
However, if you try this page in Chrome in standard and the phone emulation, you will see that the CSS directives are there for white background and green/grey text – as this is inserted to my WP – Additional CSS:

/* Forminator Classic - phone list formatting override for mobiles */
#forminator-module-6162 .intl-tel-input .country-list { background-color: #FFF !important;}

#forminator-module-6162 .intl-tel-input .country-list .country-name {
    color: #215257 !important;
}

#forminator-module-6162 .intl-tel-input .country-list .country .dial-code {
    color: #BFBFBF !important;
}

I have created a simple test page (https://fiigure.co/en/tel-test/) on my site (with form id is 6131) with the following:

Forminator Appearance Custmo CSS:

body { font-family: Lato; font-weight: 400; font-size: 16px; line-height: 1.6; color: blue; !important }

.intl-tel-input .country-list { background-color: #fff !important;}

.intl-tel-input .country-list .country-name {
    color: #215257 !important;
}
.intl-tel-input .country-list .country .dial-code {
    color: blue !important;
}

/* Forminator tel-test - phone list formatting override for mobiles */
#forminator-module-6131 .intl-tel-input .country-list { background-color: #FFF !important;}

#forminator-module-6131 .intl-tel-input .country-list .country-name {
    color: #215257 !important;
}

#forminator-module-6131 .intl-tel-input .country-list .country .dial-code {
    color: #BFBFBF !important;
}

Though on emulators, including phone render on Chrome this looks to work, on my real test devices, it is not rendering to the directive, rather falling back to the defaults, therefore I have had to declare these without the module prefix in the additional CSS to support my live forms so that they are legible on mobile as else it was being ignored on mobile when just using the ‘#forminator-module-xxxx’ form-id for each to try to achieve the desired outcome.

Let me know if you can find any reason or other suggested workaround.
I obviously cannot remove the original directives as I have pages live that need to be legible.

Thanks,

Thiru

Hi Adam,

Thanks for this, but when I entered the following in Additional CSS in WP Customisation, I ended up with the same White on White issue on mobile.
Not sure if I did anything wrong, so am pasting in the CSS I added.

‘/* Forminator – Modern phone list formatting override for mobiles */
#forminator-module-6163 .intl-tel-input .country-list { background-color: #0F3A48 !important;}

#forminator-module-6163 .intl-tel-input .country-list .country-name {
color: #FCC000 !important;
}

#forminator-module-6163 .intl-tel-input .country-list .country .dial-code {
color: #BFBFBF !important;
}

/* Forminator Classic – phone list formatting override for mobiles */
#forminator-module-6162 .intl-tel-input .country-list { background-color: #FFF !important;}

#forminator-module-6162 .intl-tel-input .country-list .country-name {
color: #215257 !important;
}

#forminator-module-6162 .intl-tel-input .country-list .country .dial-code {
color: #BFBFBF !important;
}’

Any advise is appreciated.

Thanks,

Thiru

Hi Nebu John,

Thanks, this did get honoured on mobile too though it seems a little limiting.
It means that all my forms have to have the same styling if it is added to
WP –> Additional CSS.
Is that correct?

In fact I build forms in at least Classic and Modern styles to suit the user / page within my site.
Is there any other possible solution whereby I can align the phone list to the form style rather than globally to all forms within the site?

Thanks for any further suggestions.

Thiru