WordPress Form Rendering Issues on Mobile

I’ve noticed that the forms on my wordpress.com sites are looking a little off on mobile devices. The input fields are too wide and are trailing off the screen; and it is happening with both the desktop and mobile themes.

SamsungGalaxyS2_WordpressFormiOSSimulator35Retina_Wordpressform

Looking at the css I see that inputs have a width of 300px:

.contact-form input[type="text"],
.contact-form input[type="email"] {
    margin-bottom: 13px;
    width: 300px;
}

There is no real need to fix the input fields to 300px. Updating the css to give all text inputs an ideal width of 100%, with a minimum of 100px and a maximum of 300px; should provide the perfect experience across modern screen resolutions.

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="password"],
.contact-form input[type="url"],
.contact-form input[type="number"],
.contact-form textarea {
    min-width:100px;
    width: 100%;
    max-width: 300px;
}

I have updated my wordpress.com sites, however the change hasn’t taken hold. I have a paid Custom Design upgrade so I should be able to make the change, however my custom css is loaded before the grunion.css file which provides the form styling that I am trying to change. Thus, instead of overwriting its css, it is overwriting mine.

I have logged two bug reports with WordPress.com:

  1. Issue #1479808: Input field rendering issues on smaller resolutions.
  2. Issue #1479812: Custom css file precedence.

I’ll post an update once I hear back.

2 thoughts on “WordPress Form Rendering Issues on Mobile

  1. Great news, wordpress.com has fixed the custom css file precedence bug, Issue #1479812. I’m still waiting to hear about the input field bug, Issue #1479808.

  2. WordPress.com have now also fixed Issue #1479808, relating to form input fields on mobile. All looks good so I no longer need my custom fix. A big thank you to the devs who sorted this out 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s