Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #1360412

    Hi,
    In my booking widget, the both input text fields for “adults” and “kids” count are in gray color on mobile, but in #000000 on other devices.
    Is any CSS from Enfold source code who applying an opacity on that field?
    They always should be in black #000000.
    Thanks,
    D

    #1360443

    Hey Mountain,

    Thank you for the inquiry.

    The color of the text in the input field is already set to black when we checked. Did you add this css code?

    #mainContainer input.count {
        width: 40px !important;
        margin: 0px 5px;
        font-size: 1.2rem !important;
        color: #000!important;
    }
    

    Best regards,
    Ismael

    #1360501

    Hi Ismael,

    Yes that CSS code works perfectly on desktop but not on mobile.
    Looks like a CSS code takes over on small screens, I am wondering if it’s related to Enfold source code?
    Thanks

    #1360511

    Hi,

    Thanks for the update. Which device and browser are you using? If you could share a screenshot of what you are seeing on your end, then that would be helpful as well.

    Best regards,
    Rikard

    #1360546

    Hi Rikard,
    I use an iPhone 12 mini and the color of the text is same on Chrome, Safari and Firefox Focus.
    I have attached a screenshot in the notes.
    You can try by yourself from any phone.
    Thanks!

    #1360573

    Hi,

    Thank you for the update.

    We were able to reproduce the issue on an iPhone emulator. The number in the input field is faded because the opacity of the input field is set to 0.4. To fix the issue, we have to set the opacity of the quantity input element back to 1.

    Please add this css code in the Quick CSS field.

    #mainContainer div.qty input {
       opacity: 1 !important;
    }
    

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    #1360639

    Hi Ismael,
    That looks better thanks!
    It looks like the color is still not the #000 but a little bit lighter
    Any idea on the color pulled here?

    Thanks again!

    #1360698

    Hi,

    Thanks for the update. It looks correct on my end now, please see screenshot in private.

    Best regards,
    Rikard

    #1360701

    Hi Rikard,

    Indeed it is, when resizing the window and looking from Inspect Element but it’s not on my phone.
    Looks lilke another color is applying

    #1360779

    Hi,

    I have checked your website on my iphone however it looks correct on my end as well. I attached a screenshot in private content field below :)

    Regards,
    Yigit

    #1360818

    Hi,
    Thanks for helping!
    At first glance the colors look same, but you can see the difference in the screenshot below
    It seems the color #545454 (#666666) overrides #000000 on mobile.

    #1361018

    Hi,
    Thanks for the screenshot and link to your page, I checked with my Android phone and the fields are black, I don’t have an iPhone.
    Try this css:

     #top .main_color #mainContainer #adultCount,
     #top .main_color #mainContainer #kidsCount {
    	opacity: 1 !important;
        color: #000 !important;
    }

    Then clear your browser cache and any cache plugin, and check.
    Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

    Best regards,
    Mike

    #1361292

    Hi MIke,

    I tried that CSS but no success.
    I cleared cache on WordPress and I am testing on Firefox Focus + Chrome Incognito mode (css cleared)

    #1361427

    Hi mountainlover,

    Can you try adding -webkit-text-fill-color to Mike’s code, so it should look like:

     #top .main_color #mainContainer #adultCount,
     #top .main_color #mainContainer #kidsCount {
        opacity: 1 !important;
        -webkit-text-fill-color:#000;
        color: #000 !important;
    }

    Hope this helps.

    Best regards,
    Nikko

    #1361456

    Hey,

    I tried adding the code Nikko shared and “-webkit-text-fill-color: #000;” part seems to do the trick :)

    Best regards,
    Yigit

    #1361466

    Hi Nikko, Yigit,

    I confirm it’s now working!
    Thank you very much

    #1361470

    Hi,

    Thanks for your confirmation!

    Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Input text fields wrong color on mobile’ is closed to new replies.