-1

I have designed my site on wordpress using divi theme with all latest updates. Here is the link - http://democustomcaterersfit.mringenuity.net

If i visit from windows pc, android mobile, everything seemed perfect but the problem occurs when i try to visit from any apple device. The input field text and also some other text's color changed to white on apple devices. I have no idea why this is happening.

I need help on this, i'm stuck for 3 days on it. Thank you all in advance

Niloy
  • 381
  • 2
  • 13

3 Answers3

1

Different operating systems display visual elements very differently. Especially when it's things to do with the shadow DOM (input fields). If you look through the css and can't find anything like this: 

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}

Taken from here: CSS media query target only iOS devices

Then there's a chance it is the operating system/browser that you're using.

So first i would check that you are using the same web browser on each device you're testing on, e.g. visual elements will usually be different between firefox, safari, chrome etc. This will tell you what it is likely to be (os or web browser).

Then i would explicitly set the CSS properties of the input fields, set it to the colours you want for all devices. Failing that, try the media queries above and explicitly set the colours you want for IOS devices.

TheJSWizard
  • 141
  • 4
  • Doesn't work, i'm guess if there's any problem with the hosting, because i have used this theme several times without any issues. – Niloy Aug 16 '18 at 10:04
1

Put this CSS in either your themes custom CSS section or install the plugin "simple custom CSS"

Try with the following CSS:

.et_pb_signup_1 .et_pb_newsletter_form p input[type="text"], .et_pb_signup_1 .et_pb_newsletter_form p textarea, .et_pb_signup_1 .et_pb_newsletter_form p select, .et_pb_signup_1 .et_pb_newsletter_form p .input[type="radio"]+label i, .et_pb_signup_1 .et_pb_newsletter_form p .input[type="checkbox"]+label i {
    background-color: #cccccc!important;
}

The !important part should override any other value in your theme.

slider2013
  • 51
  • 6
0

Thank you all for the response, I just solved the problem, I have uploaded a font into the theme that wasn't supported by the ios devices.

So, it worked after setting the default font.

Niloy
  • 381
  • 2
  • 13