Placeholder Text is not visible on IOS/Iphone/Mobile

Hello!

I am having an issue with place holder text. I am using an text input field that is being used as a date picker that I created with custom code and an html embed. On desktop everything works perfectly! However, for some reason, when I view on mobile (in this case, my iphone) it kind of disappears. I am able to see it for a split second on page load, but then it is not visible. I’m not for sure what it is, but I have literally tried everything (line height to 1px, removing padding from input field, float to left, etc.) but nothing! Please help!

Here is my Read-Only link: Webflow - City Nester's Website

Here are my pictures:

Phone

Desktop:


if you need anything to answer these questions let me know!

@Greg_Taylor - I would guess it is because you are using custom fonts which may be the culprit. That should be an easy test to rule out.

Hey webdev,

I tried using Arial Font and still I am not able to see the placeholder text

I also went into the web inspector and removed custom fonts and it still doesnt show. It only shows the changes in the submit button as well as my “choose city” button. Any suggestions outside of that? Thanks for your help!

We looked at your site on the web, but lots of the fields don’t work on our end.

About the date range, I think the element is hidden for screens smaller than 767 pixels wide. That’s where I think is the issue. I think maybe you can check the layers to find out the properties of the date range field.

if you can, check the live website thecitynesters.com on iPhone or Mobile. You will see what I mean there. It wont work with the read-only link. I do have a different button hidden for submit, but the Check-In and Check-Out are the Placeholder text fields that are not showing up

@Greg_Taylor Try without flatpikr as it looks unmaintained or follow the potential solution outlined in this STILL OPEN issue.

Same issue on IOS and Android and tested back multiple versions going back.

So I am trying to use a different one. I am using flowbase’s simple date picker but it seems as though the background color changes when in mobile. What code will I need for that to keep the color the same as desktop?

https://preview.webflow.com/preview/webflow-date-picker?utm_medium=preview_link&utm_source=designer&utm_content=webflow-date-picker&preview=033289c86d17f2026974458c59b41ec8&workflow=preview