WordPress.org

1. pulsedog
   Member
   Posted 1 year ago #
   

   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/

   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?

2. pulsedog
   Member
   Posted 1 year ago #
   

   Confirmed that it looks good in Chrome, IE, Firefox on desktop, so it's gotta be a mobile thing.

3. Gary Darling
   Member
   Posted 1 year ago #
   

   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.

4. pulsedog
   Member
   Posted 1 year ago #
   

   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.

5. Gary Darling
   Member
   Posted 1 year ago #
   

   Are you familiar with responsive structure via the @media css query? Google @media if not, but here is something I used for this site:
   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 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;
   	}
   }

Topic Closed

This topic has been closed to new replies.