Cutted text in input label on mobile

  • Resolved wsseri

    (@wsseri)


    2 years, 6 months ago

    Hi community,

    i have problem with contact form on mobile. On website responsive tester is input label full showed (screen). But when i try it live on mobile, it′s cuted (screen2). I have tried it on different browsers so i think the problem its not in my device.I tried to edit paddings in css, line height, font size but in every size, the problem was same.

    My question is, when responsive tester shows it′s ok, problem is in my device? On other side, when the problem is in form, is there any way to fix it?

    I will be really thankfull for any help,thanks

    • This topic was modified 2 years, 6 months ago by wsseri.

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

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

  • Try to fix or add CSS for mobile view (device width less than 800px). I think the mail issue might be the form frame height or/and max-height in CSS class.

    I was able to reproduce the issue on my device too.

    After testing the contact form, it appears the issue is related to the whytebook font used by the site. The font doesn’t render the text inside form fields correctly on some devices.

    Using another font family fixes the text.

    There are two options:

    1. Replace the font file with another one, if possible
    2. Set a different font to the form fields (web safe font is recommended)

    This is the CSS file that handles the font families CSS code: https://doulic.sk/wp-content/uploads/useanyfont/uaf.css?ver=1662918635

    For example, you can change this code:

    
.ff-el-form-control, ff-el-form-control{
	font-family: 'whytebook' !important;
}

    with this one:

    
.ff-el-form-control, ff-el-form-control{
	font-family: Arial !important;
}

    Due to how the theme handles the fonts, !important is required.

    The form must be tested when the styles are changed to ensure everything is okay.

    • This reply was modified 2 years, 6 months ago by aatanasov.
    • This reply was modified 2 years, 6 months ago by aatanasov.
    Thread Starter wsseri

    (@wsseri)

    Hello, Aleksandar.

    Exactly how you writed. The problem was in the font, i changed the font and the problem is away. I want to say big thanks to you, for your personal time invested to look at my code. Have a nice day and again, thank you!

    Hi @wsseri,

    You’re welcome. Please feel free to mark the issue as solved if everything is okay.

    Have a nice day, you too!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Cutted text in input label on mobile’ is closed to new replies.