Mobile Contact Form

Question

I'm struggling a bit with this contact form on my site: http://www.sandhtestsite.kaylynnehatch.com/contact-us.html

I'm trying to get it to work well with mobile (the rest of the site scales down using @mobile screen tags in the CSS).

The form itself is stacked so the fields don't need to float or anything, but I would like to have the container and textarea shrink down to better fit mobile screens.

I've tried using @mobile screen with the #contactus elements in the CSS but it doesn't seem to work. Any suggestions?

your textarea has columns =50 , you have set based on screen width using JS or jquery — J Santosh, Oct 10 '15 at 03:27

score 2 · Answer 1 · edited May 23 '17 at 12:22

There are several issues that you are dealing with. Let's step through them one by one:

The contact form is loaded into an iframe, which complicates things unnecessarily.
The textarea has cols="50" set, which is extending the width off the side of the mobile screen.
fieldset is set to a width of 320px, in addition to the rule: padding: 20px. With the following CSS, the fieldset will be 360px wide.

#contactus fieldset {
  width: 320px;
  padding: 20px;
  /* width (320px + (20px*2)) == 360px */
}

In addition, you may find developer tools such as Firebug or the Chrome / Safari Developer Tools indispensable for times like this. With these, you can quickly and easily highlight what elements are overflowing the screen, changing the CSS realtime, while you watch your design. It is a real timesaver.

Concerning cols on the textarea element, this question might be of benefit as well: sizing a textarea with CSS vs with cols and rows

Oh, so my problem lies more in how I've setup the contact form, not the setup of the mobile properties. — Kalangalang, Oct 10 '15 at 05:18

Mobile Contact Form

1 Answers1