Reply To: iPad Mobile view

[Sushil Adhikari]

I’m guessing your iPad air is a retina display with that high resolution…. the trick here is to edit the Media Queries which applies alternate CSS to elements (such as your form fields) based on the device and resolution. The reason for what you are experiencing is because the theme does not have a Media Query for that resolution, but it does for smaller devices and for non-retina resolutions.

The form fields change to 100% widths when it reaches a max of 979 pixels in width on a device (line 3442 of style.css)

@media (max-width: 979px) {
	.input-large,
  	.input-xlarge,
  	.input-xxlarge,
  	input[class*="span"],
 	 select[class*="span"],
  	textarea[class*="span"],
  	.uneditable-input {
		display: block;
		width: 100%;
		min-height: 30px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
  	}
}

You may need to make an adjustment to that media max width for your unique environment. Basically that media query above makes the form fields fluid in width on any device that is 979 pixels or less.

I don’t have an ipad or other tablet to test this on so you will have to play with the numbers.