Vertical Align Label and Text in WPForms Lite

  • Resolved aberow

    (@aberow)


    4 years, 2 months ago

    The vertical alignment of the placeholder and text of single line fields depends on the device and browser. At an extreme, the native Safari browser on a first generation Apple iPhone SE shows both the placeholder and the entered text about a half-line below the field’s box, cutting off the bottom half of each. Other combinations are less severe and many, such as the Edge browser on a Windows 10 PC, have no issue.

    Is it possible to control the vertical alignment and, perhaps, font size of the placeholders and text? Do you believe changing these might correct the issue while not affecting the other devices and browsers?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello @aberow,

    There might be something in the line-height of you form elements that need to be adjusted for the alignment to look correct.

    Please try adding this CSS code:

    input::-webkit-input-placeholder {
    line-height: normal !important;
}

    And in case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site. You might also want to refer to this link for some other suggestions.

    I hope this helps!

    • This reply was modified 4 years, 2 months ago by Jade.

    Hello @aberow,

    We haven’t heard back from you in about a week, so I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation (please just see my post above).

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Vertical Align Label and Text in WPForms Lite’ is closed to new replies.