Title: [Plugin Contact Form 7] Width Issues with Text Fiels
Last modified: August 20, 2016

---

# [Plugin Contact Form 7] Width Issues with Text Fiels

 *  Resolved [pulsedog](https://wordpress.org/support/users/pulsedog/)
 * (@pulsedog)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-24/)
 * I put together a contact form using Contact Form 7. It works beautifully on a
   desktop, and I was able to adjust the width to work well with the template.
 * [http://www.pulsedog.com/contact/](http://www.pulsedog.com/contact/)
 * My question is about mobile. When I pull this URL up in Safari, the “Subject”
   and “Message” fields are much wider than the table area behind them.
 * What could be causing this?

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

 *  Thread Starter [pulsedog](https://wordpress.org/support/users/pulsedog/)
 * (@pulsedog)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-24/#post-2625236)
 * Confirmed that it looks good in Chrome, IE, Firefox on desktop, so it’s gotta
   be a mobile thing.
 *  [Gary Darling](https://wordpress.org/support/users/garydarling/)
 * (@garydarling)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-24/#post-2625238)
 * I’m looking at it in Chrome/Mac, the two fields have size values of 108 and 105.
   Try using no more than 40 for those.
 *  Thread Starter [pulsedog](https://wordpress.org/support/users/pulsedog/)
 * (@pulsedog)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-24/#post-2625250)
 * That would work, but then they don’t fill up that table, they’re much shorter
   in width. If there’s no way to have both, I’d rather go with what you’re saying.
   However, if there’s a way to have it display properly, that would be ideal.
 *  [Gary Darling](https://wordpress.org/support/users/garydarling/)
 * (@garydarling)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-24/#post-2625255)
 * Are you familiar with responsive structure via the [@media](https://wordpress.org/support/users/media/)
   css query? Google [@media](https://wordpress.org/support/users/media/) if not,
   but here is something I used for this site:
    [http://curtdarling.com](http://curtdarling.com)
 *     ```
       @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
       	form {
       		max-width: 300px;
       	}
       	textarea {
       		width: auto;
       	}
       }
       ```
   
 * Notice the nested css inside the [@media](https://wordpress.org/support/users/media/)
   query. This checks the maximum screen size of the device and allows you to override
   the css written for wider screens. So you must declare a form element width via
   css that all screens will parse (don’t use **column** or **size** inside the 
   form element), then smaller screens will see this media query and adjust the 
   width.
    Example:
 *     ```
       form {max-width: 600px;}
       @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
       	form {
       		max-width: 300px;
       	}
       }
       ```
   

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

The topic ‘[Plugin Contact Form 7] Width Issues with Text Fiels’ is closed to new
replies.

 * 4 replies
 * 2 participants
 * Last reply from: [Gary Darling](https://wordpress.org/support/users/garydarling/)
 * Last activity: [14 years, 2 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-24/#post-2625255)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics