Confirmed that it looks good in Chrome, IE, Firefox on desktop, so it’s gotta be a mobile thing.
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.
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.
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;
}
}
