Responsive Contact Form Help

HippySunshine

Senior Member
I have a basic contact form which I have made responsive, however on the mobile view, when I click in the textarea to type, the input box shrinks from 100% to like 50% and I can't figure out why :(

Can anyone shed any light?

Thanks
 
That didn't seem to work bigdave :(

Here is what code I have:

Code:
input[type=text], textarea {
  color: #222;
  font-size: 0.8em;
  font-family: georgia;
  font-style: italic;
  font-weight: normal;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.5em;
  padding: 10px 0 15px 0;
}
input, textarea {
    padding: 5px;
    width: 50%;
    margin: 0px 0px 10px 0px;
    border: 1px solid #222;
}
textarea {
   margin: 0 auto;
  height: 150px;
  display: block;
}
textarea:focus, input:focus {
    border: 1px solid #222;
}
input.btn-black {
   margin: 25px auto 0 auto;
  width: 20%;
  display: block;
}
label {
  margin: 25px auto 15px auto;
  width: 100%;
  display: block;
}
 
Is there a live version somewhere? I'm trying to replicate the error but don't know the markup you're using :)
 
I'd make your inputs all 100% width, then add a class to your form with the following values;

Code:
.contact-form {

    width:50%;
    float:right;

}

This should make it sit beside the image (which I'd actually put inside a div as a background image, but that's another story), then I'd change the width to 100% using a mobile/tablet media query.

In the long-term I'd look at splitting your content into rows and columns to make creating and debugging a bit faster and easier. You can use something like Simple Grid to add this in by just downloading the CSS file and linking it into your pages. Then just add in the appropriate classes to make stuff work as it should.
 
I've just tried that and it didn't work :( I don't know what I'm doing wrong - *bangs head against wall* o_O

Also, can I ask what benefit putting the image in a div as a background has?

Thanks
 
Also, can I ask what benefit putting the image in a div as a background has?


Main reason is it prevents it being added into the DOM so it won't appear to screen-reader users. You should add images in via <img> tags if they server some purpose in directly supporting block of text or content on a page, such as in articles or a portfolio listing. If it's just a 'decorative' image like here then it's better to take it out of the DOM and just have it as a background image.

Also, not loading images via <img> tags will reduce the number of HTTP requests to the server when the page is loaded, improving page load speed time overall.
 
Back
Top