iPad Mobile view

[stefano]

Hello again.
I have a page which displays a right column with a text widget displaying a contact form, a Facebook iFrame and another widget with a picture.
When viewed in an iPad the form fields are larger than the page and as a result a black band is shown on the right of the page, fully showing the width of the fields but very ugly looking. I tried the same page in an iPhone and on a galaxy s4 and no issues. It seems to happen on the iPad only.
If i remove the contact form everything is good so it obviously has a lot to do with the form. I tried playing with width, padding and margin of the form fields to no avail.
The resolution of the ipad air I have is 2048-by-1536. The demo website of celestial reloaded looks fine on the iPad as does my site. It is only the contact form that screws it up.
Another related issue is that on my contact page I have the contact form in a half column and that too looks pretty bad in the iPad.
It is probably the same issue…

page with form issue on right column:
http://nsc2.northstarcomputers.ie/school-websites/

contact page:
http://nsc2.northstarcomputers.ie/contact-us/

Can you help?

Thanking you in advance

[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.

[stefano]

Thank you for the prompt answer as usual.
Just to let you know, in the meantime I tried other contact form plugins and they display correctly in all the mobile devices I can try.
Would the Contact Form 7 code be at fault instead of your code then? I mean, if the Celestial code behaved like that with every form then I would say your explanation makes perfect sense but Celestial displays correctly on retina display with other plugins. What do you think?
Thank you

[Sushil Adhikari]

Could be…but at the same time hard to say without really digging in and checking code and to test in a similar device (which I do not have at the moment).
I’m guessing the other plugin for your form is working then?

[stefano]

Update:
the developer of contact form 7 has info on styling the forms: http://contactform7.com/styling-contact-form/
This code:

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

allows the width of the whole page with the form either in a widget or in a column to be properly displayed in the retina display of an iPad air.
So to summarize there is no fault in Celestial code and the issue was solely with the form’s styling.
Thanks

[Sushil Adhikari]

Awesome…thanks.

[Author]

Posts