mobile label font size issue

Resolved Nyx1961
(@nyx1961)

4 years, 2 months ago

Hi there. Thanks for a lovely plugin. I’m using your plugin for a contact form on my site. It doesn’t seem to be as responsive as I’d expected. There are discrepancies in font sizes when I view the form on my phone that do not occur on my laptop.

The font for the NAME and EMAIL labels look great and is proportionate. However, the SUBJECT and MESSAGE label font is much bigger in comparison and at least double the size. Also, the text font size for the radio button and lower checkbox are also proportionately too big. I’ve used Chrome’s dev tools but can’t figure out why the form looks great on my laptop nor why there’s such a difference when the form is viewed on mobile. I would appreciate some help with this, please.

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

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

Plugin Support Ethan Choi
(@ethanchoi)

4 years, 2 months ago

Hi @nyx1961,

Thanks for reaching out!

When you get the chance, could you let me know the name and version of the mobile device and browser you were using? I could not replicate the issue on my end.

Thanks!

Thread Starter Nyx1961
(@nyx1961)

4 years, 2 months ago

Hi Ethan,

Thanks for responding! My device is a Galaxy S7 with Android 8.0.0 and Chrome 85.0.4183.101. Here’s a screenshot showing the issue https://www.greenwitch.ca/wp-content/uploads/Screenshot_20200914-074603_Chrome.jpg If you need any other information, please let me know. Thanks. : )

Plugin Support Ethan Choi
(@ethanchoi)

4 years, 2 months ago

Hi @nyx1961,

Thanks for the details!

It looks like Autoptimize is installed on your site, and it may be caching styles on the site which is causing a different style to be applied to the form.

When you get the chance, could you try clearing cache on your site by following this guide? Additionally, you can follow this guide for clearing cache on your mobile browser.

Hope this helps!

Thread Starter Nyx1961
(@nyx1961)

4 years, 2 months ago

Hello Ethan. Thanks for looking into this for me. I cleared all my caches, including my mobile cache Autoptimize’s cache but it didn’t fix the issue. I disabled Autoptimize, cleared my caches including my mobile cache again but that didn’t fix it. I re-enabled Autoptimize, cleared its cache, disabled it again, cleared my caches including mobile cache again ( I do this every time I browse on my phone) but still nothing. I deleted every trace of Autoptimize from my server including its cache folder but that didn’t change anything. I decided to test another less fancy contact form plugin to see if I’d have the same issue but I don’t. Maybe it’s a conflict with my theme. I’m not sure what the problem is. I guess I’m going to have to go with less fancy. : ( I appreciate your trying to resolve this for me. Thank you.

Plugin Support Ethan Choi
(@ethanchoi)

4 years, 2 months ago

Hey @nyx1961,

Sorry to hear that clearing cache did not work to resolve the issue.

In case if you’d like to continue troubleshooting, you could try the steps described in our detailed guide on how to test for plugin/theme conflicts.

Thanks!

Thread Starter Nyx1961
(@nyx1961)

4 years, 2 months ago

Good morning, Ethan. Thanks for reaching out. : )

Before I noticed your response, I tried it in a sandbox subdomain I created to test in. I tested with WordPress 5.51 and the TwentyTwenty theme. No plugins except for WPForms. I checked and the same thing happened.
https://www.greenwitch.ca/wp-content/uploads/Screenshot_20200914-074603_Chrome-1.jpg

I’m going to create a new form, just to see if perhaps it’s my form that corrupted. You never know, right? I’ll let you know how it goes.

Thread Starter Nyx1961
(@nyx1961)

4 years, 2 months ago

Hey Ethan. Further to my above response, I created a new form, just using the default Simple Contact Form. I didn’t change a thing, not even the name. I created and tested in my sandbox subdomain with WordPress 5.51, the TwentyTwenty theme, and WPForms 1.6.2.3. The exact same thing happened. The only difference is that instead of Subject and Message fonts being enlarged as it is on my first form, this time it’s the Name and Comment or Message fonts that are enlarged. So, it doesn’t seem to be a conflict with the theme on my site since I didn’t install it in my test subdomain.

https://www.greenwitch.ca/wp-content/uploads/Screenshot_20200916-082140_Chrome.jpg
Plugin Support Ethan Choi
(@ethanchoi)

4 years, 2 months ago
Hi @nyx1961,

Thanks for the update!

While I could not replicate the issue described, perhaps it could be resolved by using some CSS to override any other CSS that may be applied to the form on your site.
```
div.wpforms-container-full .wpforms-form .wpforms-field-label {
    font-size: 16px !important;
}
```
Please feel free to adjust the font-size value according to your preference.

And in case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site.

Hope this helps!
Thread Starter Nyx1961
(@nyx1961)

4 years, 2 months ago

Hi Ethan,

Now I’m even more baffled by this, since it occurred for me in a clean WordPress 5.5.1 installation, using the default theme, and with only the WPForms plugin installed and no other plugins whatsoever. It’s really strange.

Anyway, thanks very much for the code. I’ll give that a try in the hopes that it fixes it for me.

Have a great day!

Plugin Support Ethan Choi
(@ethanchoi)

4 years, 2 months ago

Hi @nyx1961,

I agree that the issue is definitely odd. If you’d like more help with this, could you please let me know?

Thanks!

Thread Starter Nyx1961
(@nyx1961)

4 years, 2 months ago

Hi Ethan! Thanks so much for following up with me. I tried the code you gave me and put it in my theme’s CSS but it didn’t help, despite clearing my phone cache. I had the exact same issue as before. I asked my daughters to check on their iPhones to see if they see it any differently than their dad and I do on our Galaxy phones but they had the same issue with the enlarged font. I’m beyond baffled at this point. I honestly, truly would much prefer to use your plugin than the one I’m stuck using for now. When I have a bit more time, I’ll try to figure it out further.

Plugin Support Ethan Choi
(@ethanchoi)

4 years, 1 month ago

Hey @nyx1961,

Thanks for letting me know. I’m going to go ahead and close this thread for now, but when you’d like us to assist further please feel welcome to continue the conversation or create a new post in the support forum.

Thanks!

Thread Starter Nyx1961
(@nyx1961)

4 years, 1 month ago

Thanks again for your help with this, Ethan. 🙂

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

The topic ‘mobile label font size issue’ is closed to new replies.