Mobile form fields unreadable

Hi @arianelariviere,

I see the problem. I can reproduce it on my phone, but for some reason, I am unable to do so using the dev tools on the desktop. That makes it a little difficult to track down exactly what is happening.

There is clearly some sort of styling issue, and I see styles coming from a variety of sources targeting those fields. I also see a good deal of padding applied to the input fields. I’d probably try removing any padding, making sure the line-height is set to 1 or greater, manually setting colors on specific breakpoints and other similar tactics.

You can use the customizer in WordPress to add additional CSS quickly while refreshing the page on your phone to test it.

Let me know if that helps,
Jon

Thank you Jon!

I modified something and now it works. But the field names are too small…

It’s the same on desktop and mobile.

Is there a CSS I can use on that Mailchimp form to get the font bigger?

Thank you!

Ariane

Hi @arianelariviere

Your theme has this CSS code causing the field labels to be 14px;

.btn, .form-control, .woocommerce #reviews #comments label, body {
    font-size: 14px;
}

Try using this code to change it.

.yikes-easy-mc-form label span {
    font-size: 18px;
}

18px is only a suggestion, you can change it to whatever you want.

Thank you.
-Tracy

Thank you Tracy!

It worked perfectly!

Ariane

Awesome!

-Tracy