Form placeholder text not vertically centered on mobile

Design help General
1

Hi all,

Here is my read-only link before I even ask my question haha.

I am having trouble getting my placeholder form text to be vertically centered. It looks great on desktop, but on mobile the text moves to the top across all mobile browsers. Please see the screenshots below. One other things to note is that the text that is actually entered is always vertically centered, just not the placeholder text.

Also, I would like for my form fields to remain ~45 pixels tall. I have tried playing around with the line height, but this seems like more of a workaround that won’t always look vertically centered across devices. Does anyone have a recommendation?

Thanks all!

Staging site link

PNG
PNG1242×2208 125 KB
PNG
PNG1242×2208 121 KB
PNG
PNG1242×2208 122 KB

2

Hey Myonke,

I checked out your site and can see the issue happening on an iphone XS but not a pixel 2 XL :thinking:

Have you tried using rem or ems instead? The fonts might not be scaling correctly on the iphone.

Hope this helps!

3

@MechKeysPls Thanks for the suggestion. I just tried changing to em instead of pixels, but I am seeing the same issue on an iPhone 7 Plus.

4

@MechKeysPls Curious if it looks okay on your Pixel and XS now? I made an update with the line height that I feel like is a workaround…but whatever at this point haha.

5

You did it! Its displaying correctly on both devices.

6

Well sweet. Thanks for the help! Wish I had a bunch of devices to test on haha. If you ever need to know what something looks like on an iPhone 7 Plus, lmk!