Need help with a HTML-based form truncating in iPhone

Hi all, I’m creating a site for showing and booking my vacation rental property using Foundation. For the two property pages, I’m using Phantom, and as part of the phantom-based pages, I have two HTML-based widgets, one for a calendar, and one for an inquiry form. These are forms written by a company that has a product interfacing with my site to handle the inquiries and bookings and provide updated calendar information.

These forms work great for desktop and tablet views. But when I try to look at them on the iPhone, they are both truncated at the bottom. I’ve tried adjusting the padding at the bottom of the HTML, but this doesn’t solve the problem. The Rapidweaver view looks OK for the iPhone Preview, it’s just when I get it actually on the phone that it won’t display properly.

The site is at It is still in progress as I have to optimize images, but you should get an idea of what is going on with the form in question. You can see it under Properties: Casa Nokomis: Inquiries/Bookings (or Calendar) or Properties: Casa Coquina: Inquiries/Bookings (or Calendar).

I’m stymied, and the company that has developed the widgets is too. I thought I’d turn to you guys and see what might be the issue. Thanks in advance.

Maybe try changing the container from fluid to fixed?

There is more than enough space there for the comments and submit button but they do not display.

Nice to see you got the menu working :slight_smile:


Just an update, this was resolved thanks to the work of Jon Meadows of 1 LittleDesigner in conjunction with the developer of the widgets I use on the page. Thanks to both of them for putting their heads together and coming up with javascript code that solved the problem.